如何重寫從香草JS到JQuery的AJAX請求？

目前我正在學習JS，並且非常熟悉vanilla JS，但對於我來說JQuery語法似乎有點奇怪。所以，我對JS下面的代碼和它工作得很好：如何重寫從香草JS到JQuery的AJAX請求？

let xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    questions = JSON.parse(this.responseText); 
    loadQuestionsData(); 
    } 
}; 
xhttp.open("GET", "http://localhost:8080/questions", true); 
xhttp.send();

我在這裏創造新的XMLHttpRequest來我的本地和獲得的問題JSON當性反應的準備，函數loadQuestionsData（）執行（它將問題列表插入表格中）。我試着用JQuery重寫這個，但它不起作用，我不明白爲什麼。這是我第n次嘗試這樣做：

$(document).on('readystatechange', function() { 
    $.ajax({ 
    url: "http://localhost:8080/questions", 
    type: 'GET', 
    success: function() { 
     questions = JSON.parse(this.responseText); 
     loadQuestionsData(); 
    } 
    }) 
})

我也試過以下，但它並沒有太多的工作：

$(document).on('readystatechange', function() { 
    questions = JSON.parse($.ajax({ 
    url: "http://localhost:8080/questions", 
    type: 'GET', 
    })).responseText; 
})

我想這個問題是語法？代碼停止運行響應文本。

來源

2017-03-23 Inna Ditiashova

檢查錯誤控制檯。我猜這個問題是因爲jQuery會爲你反序列化響應，因此你在一個對象上調用'JSON.parse（）'並得到一個錯誤。 –

文檔對象是否有'readystatechange'事件？只需將該代碼移出該事件處理程序即可使用。 – Archer

@阿徹很好看，錯過了。 OP，請改用document.ready處理程序; '$（function（）{$ .ajax（...' –

文檔對象沒有onreadystatechange事件 - 這是XHR對象的一部分。 jQuery AJAX方法將爲您處理狀態更改（簡單性的一部分）。

此外，成功處理程序有一個參數是響應文本，所以您需要將其添加到函數簽名，以便您可以在函數中訪問它。

改成這樣，而不是...

$.ajax({ 
     url: "http://localhost:8080/questions", 
     type: 'GET', 
      success: function(responseText) { 
      questions = JSON.parse(responseText); 
      loadQuestionsData(); 
     } 
    })

來源

2017-03-23 11:24:15 Archer

WOW，幫助了我很多！現在它很好用！除此之外，我已經透露現在我可以刪除JSON.parse，因爲* responseText *已經以我需要的方式被解析了！非常感謝您的幫助！ –

沒問題 - 很高興它幫助你:) – Archer

你並不需要使用：

$(document).on('readystatechange', function() { 
});

爲readystatechange是的XmlHttpRequest的屬性（）;

只需更改您的代碼：

$.ajax({ 
    url: "http://localhost:8080/questions", 
    type: 'GET', 
    success: function() { 
     questions = JSON.parse(this.responseText); 
     loadQuestionsData(); 
    } 
    });

來源

2017-03-23 11:26:29

是的，我做到了，它的工作原理非常好！感謝您的幫助！ –

如何重寫從香草JS到JQuery的AJAX請求？

回答

相關問題