Javascript 获取搜索表单以触发JQuery Ajax请求_Javascript_Jquery_Html_Ajax_Css

Javascript 获取搜索表单以触发JQuery Ajax请求

javascript jquery html ajax css

Javascript 获取搜索表单以触发JQuery Ajax请求,javascript,jquery,html,ajax,css,Javascript,Jquery,Html,Ajax,Css,我已经使用Jquery设置了一个对Ebay API的Ajax请求，当我有一个硬编码的搜索词/关键字时，它可以工作，但我不知道如何编写代码，使我的（引导）按钮使用搜索表单输入触发Ajax请求。我试过各种各样的方法，但都没有用。这是我第一次提出Ajax请求并使用JQuery，希望这是有意义的 Jquery： $(document).ready(function() { url = "http://svcs.ebay.com/services/search/FindingService/v1";

我已经使用Jquery设置了一个对Ebay API的Ajax请求，当我有一个硬编码的搜索词/关键字时，它可以工作，但我不知道如何编写代码，使我的（引导）按钮使用搜索表单输入触发Ajax请求。我试过各种各样的方法，但都没有用。这是我第一次提出Ajax请求并使用JQuery，希望这是有意义的

Jquery：

$(document).ready(function() {
  url = "http://svcs.ebay.com/services/search/FindingService/v1";
  url += "?OPERATION-NAME=findCompletedItems";
  url += "&SERVICE-VERSION=1.13.0";
  url += "&SERVICE-NAME=FindingService";
  url += "&SECURITY-APPNAME=deleted for privacy";
  url += "&GLOBAL-ID=EBAY-US";
  url += "&RESPONSE-DATA-FORMAT=JSON";
  url += "&REST-PAYLOAD";
  url += "&paginationInput.pageNumber=1";
  url += "&paginationInput.entriesPerPage=10";
  url += "&keywords=rare soul 45";  //This would get deleted?
  url += "&sortOrder=StartTimeNewest";

    $.ajax({
      type: "GET",
      url: url,
      dataType: "jsonp",
      success: function(res){
        console.log(res);
        var items = res.findCompletedItemsResponse[0].searchResult[0].item;
        var ins = "";
        for (var i = 0; i < items.length; i++){
          ins += "<div>";
          ins += "<img src='" + items[i].galleryURL + "  '/>";
          ins += "  " + items[i].title + " - ";
          ins += "Sold for $" + items[i].sellingStatus[0].currentPrice[0].__value__;
          ins += "</div><br />";
        };
        $('.results').html(ins);
      }
    });
});

$（文档）.ready（函数（）{
url=”http://svcs.ebay.com/services/search/FindingService/v1";
url+=“？OPERATION-NAME=findCompletedItems”；
url+=“&SERVICE-VERSION=1.13.0”；
url+=“&SERVICE-NAME=FindingService”；
url+=“&SECURITY-APPNAME=因隐私而删除”；
url+=“&GLOBAL-ID=EBAY-US”；
url+=“&RESPONSE-DATA-FORMAT=JSON”；
url+=“&REST-PAYLOAD”；
url+=“&paginationInput.pageNumber=1”；
url+=“&paginationInput.EntriesPage=10”；
url+=“&keywords=ravel soul 45”；//这会被删除吗？
url+=“&sortOrder=StartTimeNewest”；
$.ajax({
键入：“获取”，
url:url，
数据类型：“jsonp”，
成功：功能（res）{
控制台日志（res）；
var items=res.findCompletedItemsResponse[0]。搜索结果[0]。项；
var-ins=“”；
对于（变量i=0；i”；
};
$（'.results'）.html（ins）；
}
});
});

HTML:


提交

我有点惊讶，您成功地运行了ajax请求，但您很难注册单击事件处理程序。：）但是我们走了

$('form[role="search"]').submit(function(ev)  {
  ev.preventDefault();
  // get the input value with:
  var searchstring = $('input[type="text"]', this).val();
  // your ajax request, using the variable above
  var url = "http://svcs.ebay.com/services/search/FindingService/v1";
  url += "?OPERATION-NAME=findCompletedItems";
  url += "&SERVICE-VERSION=1.13.0";
  url += "&SERVICE-NAME=FindingService";
  url += "&SECURITY-APPNAME=deleted for privacy";
  url += "&GLOBAL-ID=EBAY-US";
  url += "&RESPONSE-DATA-FORMAT=JSON";
  url += "&REST-PAYLOAD";
  url += "&paginationInput.pageNumber=1";
  url += "&paginationInput.entriesPerPage=10";
  url += "&keywords=" + searchstring;
  url += "&sortOrder=StartTimeNewest";

  $.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    success: function(res){
      console.log(res);
      var items = res.findCompletedItemsResponse[0].searchResult[0].item;
      var ins = "";
      for (var i = 0; i < items.length; i++){
        ins += "<div>";
        ins += "<img src='" + items[i].galleryURL + "  '/>";
        ins += "  " + items[i].title + " - ";
        ins += "Sold for $" + items[i].sellingStatus[0].currentPrice[0].__value__;
        ins += "</div><br />";
      };
      $('.results').html(ins);
    }
  });
});

$（'form[role=“search”]）。提交（函数（ev）{
ev.preventDefault（）；
//使用以下命令获取输入值：
var searchstring=$（'input[type=“text”]”，this.val（）；
//您的ajax请求，使用上面的变量
变量url=”http://svcs.ebay.com/services/search/FindingService/v1";
url+=“？OPERATION-NAME=findCompletedItems”；
url+=“&SERVICE-VERSION=1.13.0”；
url+=“&SERVICE-NAME=FindingService”；
url+=“&SECURITY-APPNAME=因隐私而删除”；
url+=“&GLOBAL-ID=EBAY-US”；
url+=“&RESPONSE-DATA-FORMAT=JSON”；
url+=“&REST-PAYLOAD”；
url+=“&paginationInput.pageNumber=1”；
url+=“&paginationInput.EntriesPage=10”；
url+=“&keywords=“+searchstring；
url+=“&sortOrder=StartTimeNewest”；
$.ajax({
键入：“获取”，
url:url，
数据类型：“jsonp”，
成功：功能（res）{
控制台日志（res）；
var items=res.findCompletedItemsResponse[0]。搜索结果[0]。项；
var-ins=“”；
对于（变量i=0；i”；
};
$（'.results'）.html（ins）；
}
});
});

我有点惊讶，您成功地运行了ajax请求，但您很难注册单击事件处理程序。：）但是我们走了

$('form[role="search"]').submit(function(ev)  {
  ev.preventDefault();
  // get the input value with:
  var searchstring = $('input[type="text"]', this).val();
  // your ajax request, using the variable above
  var url = "http://svcs.ebay.com/services/search/FindingService/v1";
  url += "?OPERATION-NAME=findCompletedItems";
  url += "&SERVICE-VERSION=1.13.0";
  url += "&SERVICE-NAME=FindingService";
  url += "&SECURITY-APPNAME=deleted for privacy";
  url += "&GLOBAL-ID=EBAY-US";
  url += "&RESPONSE-DATA-FORMAT=JSON";
  url += "&REST-PAYLOAD";
  url += "&paginationInput.pageNumber=1";
  url += "&paginationInput.entriesPerPage=10";
  url += "&keywords=" + searchstring;
  url += "&sortOrder=StartTimeNewest";

  $.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    success: function(res){
      console.log(res);
      var items = res.findCompletedItemsResponse[0].searchResult[0].item;
      var ins = "";
      for (var i = 0; i < items.length; i++){
        ins += "<div>";
        ins += "<img src='" + items[i].galleryURL + "  '/>";
        ins += "  " + items[i].title + " - ";
        ins += "Sold for $" + items[i].sellingStatus[0].currentPrice[0].__value__;
        ins += "</div><br />";
      };
      $('.results').html(ins);
    }
  });
});

$（'form[role=“search”]）。提交（函数（ev）{
ev.preventDefault（）；
//使用以下命令获取输入值：
var searchstring=$（'input[type=“text”]”，this.val（）；
//您的ajax请求，使用上面的变量
变量url=”http://svcs.ebay.com/services/search/FindingService/v1";
url+=“？OPERATION-NAME=findCompletedItems”；
url+=“&SERVICE-VERSION=1.13.0”；
url+=“&SERVICE-NAME=FindingService”；
url+=“&SECURITY-APPNAME=因隐私而删除”；
url+=“&GLOBAL-ID=EBAY-US”；
url+=“&RESPONSE-DATA-FORMAT=JSON”；
url+=“&REST-PAYLOAD”；
url+=“&paginationInput.pageNumber=1”；
url+=“&paginationInput.EntriesPage=10”；
url+=“&keywords=“+searchstring；
url+=“&sortOrder=StartTimeNewest”；
$.ajax({
键入：“获取”，
url:url，
数据类型：“jsonp”，
成功：功能（res）{
控制台日志（res）；
var items=res.findCompletedItemsResponse[0]。搜索结果[0]。项；
var-ins=“”；
对于（变量i=0；i”；
};
$（'.results'）.html（ins）；
}
});
});

看起来您正在准备对文档的ajax调用，而这并不是您真正想要的。您希望在按钮按下事件时进行该调用。所以我会这么做

将ajax调用放入一个可以调用的函数中

给按钮一个id

在文档就绪时，使用jquery将事件处理程序附加到具有上面步骤2中id的元素，该元素触发对上面步骤1中提到的函数的调用

然后，不要忘记从事件中提取字段中的值，并将其作为参数放入被调用的ajax函数中。

看起来您正在准备对文档的ajax调用，而这并不是您真正想要的。您希望在按钮按下事件时进行该调用。所以我会这么做

将ajax调用放入一个可以调用的函数中

给按钮一个id

在文档就绪时，使用jquery将事件处理程序附加到具有上面步骤2中id的元素，该元素触发对上面步骤1中提到的函数的调用

然后，别忘了从事件中提取字段中的值，并将其作为参数放入被调用的ajax函数中。

给定当前HTML，您可以像下面这样在提交按钮上调用单击事件

$('button[type="submit"]).on('click', function(event) {
    /*
      since the button is of type "submit",
      prevent the default behavior. Which,
      in this case, is to submit the form.
    */
        event.preventDefault();
        //Check your browser's console to see what this is
        console.dir(event);
        //insert AJAX code here
});

此代码使用jQuery方法捕获给定元素

$（'button[type=“submit”]'）

上的给定事件。捕获此事件后，您可以在函数中以

事件

或您选择的名称访问它

此

事件

对象包含信息r