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在點擊功能中獲取請求不起作用

回答

相關問題