jquery ajax在点击功能中获取请求不起作用

我在写一个显示指定城市餐馆的网页。后端是使用yelp API获取结果并将其作为JSON转发的节点服务器。jquery ajax在点击功能中获取请求不起作用

在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粘贴到浏览器的地址栏或邮递员时，它会收到请求。

能否请您解释一下我为什么只失败的jQuery单击功能里面，但能正常工作之外它...

来源

2017-07-02 Supun Manathunga

如果我暂停JavaScript执行了几秒钟，继续它，给节点服务器发送JSON的时间，它会提醒'ok'。 –

尝试将ajax调用放入超时并查看是否再次失败 –

Html在这里[link]（https：// jsfiddle.net/rmksstr1/） –

在你的HTML按钮，你就错过了型属性

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

问题是，由于你的按钮在表单中，点击将触发提交，并且页面将被重新加载。

防止该的另一种方式是改变你的事件监听器这样的：

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

来源

2017-07-02 18:33:04

非常感谢。这固定它！ –

很高兴帮助！干杯! –

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

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

    }); 
});

来源

2017-07-02 18:37:01 Nicholas

您无法将“提交”事件绑定到按钮，它永远不会触发！你应该选择表单！ –

@FrankCadilac哈哈，很好的接受，那是我说的，但我只是复制他的代码，忘了从'btn'改成'form'：D – Nicholas

无论如何，你还应该添加一个'e.preventDefault（）'，否则页面将重新加载并且Ajax将无法工作 –

jquery ajax在点击功能中获取请求不起作用

回答

相关问题