Question

目前我正在学习JS并且非常熟悉vanilla JS，但JQuery语法对我来说似乎有点奇怪。所以我在JS上有以下代码，它的工作正常：

(2^20)x(2^20)

在这里，我向我的localhost创建新的XMLHttpRequest并获取问题的JSON，当响应准备就绪时，执行函数 loadQuestionsData（）（它将问题列表插入表中）。我试图用JQuery重写它，但它不起作用，我不明白为什么。这是我的第n次尝试：

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();

我也尝试了以下内容，但它也不起作用：

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

我想问题是语法问题？代码停止在 responseText 上运行。

Answer 1

文档对象没有onreadystatechange事件 - 这是XHR对象的一部分。 jQuery AJAX方法将为您处理状态更改（部分简单）。

此外，成功处理程序有一个参数作为响应文本，因此您需要将其添加到函数签名中，以便可以在函数中访问它。

将其更改为此...

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

Answer 2

您无需使用：

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

因为readystatechange是XmlHttpRequest（）;

的属性

只需将您的代码更改为：

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

如何从vanilla JS重写AJAX请求到JQuery？

2 个答案: