javascript - Jquery ajax get 请求在点击功能上不起作用

Question

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

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

但是当我像这样在 jquery click 函数中运行它时，它不起作用。

    $(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 加载失败:GET“http://localhost/query?city=colombo”。

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

你能解释一下为什么它只在jquery click函数内失败，但在它之外工作正常......

Answer 1

在 HTML 按钮中缺少 type 属性

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

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

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

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