Question

我已经使用Jquery为Ebay API设置了一个Ajax请求，当我有一个搜索术语/关键字硬编码时可以工作，但是我无法弄清楚如何编写代码来使我的（bootstrap）按钮触发使用搜索表单输入的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);
      }
    });
});

HTML：

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Answer 1

我有点惊讶你设法让ajax请求运行但是你很难注册一个click事件处理程序。 :)但是我们走了......

$('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);
    }
  });
});

Answer 2

看起来你正在准备文件的ajax调用，这不是你想要的。您希望按下按钮事件进行该调用。所以我会这样做。

将该ajax调用放入可以调用的函数
为按钮添加ID
在准备好文档时，使用jquery将事件处理程序附加到上面步骤2中具有id的元素，该元素触发对上面步骤1中提到的函数的调用。

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

Answer 3

根据您当前的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 .on()方法捕获给定元素'click'上的给定事件$('button[type="submit"]')。捕获此事件后，您可以在函数中以event或您选择的名称访问它。

此event对象包含有关事件本身的信息。一开始可能会非常令人生畏，但我鼓励您查看console.dir(event);电话。更具体地说，e.currentTarget / e.target和view可以了解正在发生的事情。从那里你可以查看what the difference is between some things that seem the same并熟悉它，就像你想要的那样。

让我的搜索表单触发JQuery Ajax请求

3 个答案: