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

时间:2017-07-02 18:17:37

标签: javascript jquery node.js ajax asynchronous

我正在写一个网页,显示指定城市的餐馆。 后端是一个节点服务器,它使用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'); 

       });
     });    
   });

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

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

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

2 个答案:

答案 0 :(得分:2)

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

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

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

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

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

答案 1 :(得分:0)

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

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

   });
});