Question

我正在写一个网页，显示指定城市的餐馆。后端是一个节点服务器，它使用yelp API获取结果并将其转发为JSON。

在javascript文件中，当我在document.ready()函数中调用ajax get方法时，它工作正常。控制台显示XHR finished loading。

但是当我在jquery中运行它点击这样的功能时，它不起作用。

    $(document).ready(function(){

      $('#btn').click(function(){

        var city = $('#city').val();      
        var post = $.ajax({
          url: "/query?city=" + city,
          type: "GET"
        });

       post.done(function(json){
           window.alert('ok');
       });

       post.fail(function(json){    
           window.alert('failed'); 

       });
     });    
   });

警告＆＃39;失败＆＃39;和控制台说XHR failed loading: GET "http://localhost/query?city=colombo".

但是在节点服务器中它接受请求和进程。当我直接将http://localhost/query?city=colombo粘贴到浏览器的地址栏或Postman中时，它会收到请求。

你能解释一下为什么它只能在jquery点击功能中失败，但在它之外工作正常......

Answer 1

在您的HTML按钮中，您错过了类型属性

<button type="button" id="btn" class="btn btn-block col-8">Search</button>

问题在于，由于您的按钮位于表单中，因此单击将触发提交，页面将重新加载。

另一种防止这种情况的方法是将您的事件监听器更改为：

 $('#btn').click(function(e) {
     e.preventDefault();
     ...
 });

Answer 2

试试这个，因为你有一个表格

$("form").submit(function(e) {

    var city = $('#city').val();      
    var post = $.ajax({
      url: "/query?city=" + city,
      type: "GET"
    });

   post.done(function(json){
       window.alert('ok');
   });

   post.fail(function(json){    
       window.alert('failed'); 

   });
});

Jquery ajax获取请求在click函数内部无效

2 个答案: