Javascript AJAX回调从未调用过，既没有成功也没有错误

我试图在按下提交按钮时运行这个AJAX来执行CGI脚本。因此，我使用了

eventListener

和

preventDefault

GET似乎工作正常，因为这些是我在浏览器中测试时得到的结果

响应头中的JSON就是我试图检索的JSON。

---

但是由于某种原因，我的AJAX中的成功和错误都被调用了，因此我无法访问JSON。

我发现有两件事是不正确的：

• JSON响应数据在响应头中发送，而不是在响应体中发送
• jQuery正在执行一个JSONP请求，这意味着响应应该是有效的Javascript（不是JSON），它应该调用提供的回调函数（如果没有调用该函数，jQuery将不知道请求已经完成，因此既不会调用

  成功

  也不会调用

  错误

  回调）

解决这个问题取决于您是否需要JSONP。如果不是，只需使用

json

作为数据类型，并确保json数据位于响应体中。如果确实需要JSONP，那么CGI脚本应该提供有效的JS响应，如下所示：

document.getElementById('myform').addEventListener('submit', function (e) {

// voorkomt de standaard actie van de submit
e.preventDefault();
$(function () {
    var artiest = document.getElementById("artiest");
    var rijen = document.getElementById("rij");
    var kolommen = document.getElementById("kolom");

    var CGIurl = 'http://localhost:8000/cgi-bin/schuifpuzzel.py?artiest=' + artiest.value +
        "&rijen=" + rijen.value + "&kolommen=" + kolommen.value  + "&callback=jsonp";

    $.ajax({
        type: 'GET',
        url: CGIurl,
        dataType: "jsonp",
        success: function(data){
            console.log(data)
        }

    });

});
});

---

（其中，

jQueryXXX

应该是

callback

query string参数的值）

我发现有两件事是不正确的：

• JSON响应数据在响应头中发送，而不是在响应体中发送
• jQuery正在执行一个JSONP请求，这意味着响应应该是有效的Javascript（不是JSON），它应该调用提供的回调函数（如果没有调用该函数，jQuery将不知道请求已经完成，因此既不会调用

  成功

  也不会调用

  错误

  回调）

解决这个问题取决于您是否需要JSONP。如果不是，只需使用

json

作为数据类型，并确保json数据位于响应体中。如果确实需要JSONP，那么CGI脚本应该提供有效的JS响应，如下所示：

document.getElementById('myform').addEventListener('submit', function (e) {

// voorkomt de standaard actie van de submit
e.preventDefault();
$(function () {
    var artiest = document.getElementById("artiest");
    var rijen = document.getElementById("rij");
    var kolommen = document.getElementById("kolom");

    var CGIurl = 'http://localhost:8000/cgi-bin/schuifpuzzel.py?artiest=' + artiest.value +
        "&rijen=" + rijen.value + "&kolommen=" + kolommen.value  + "&callback=jsonp";

    $.ajax({
        type: 'GET',
        url: CGIurl,
        dataType: "jsonp",
        success: function(data){
            console.log(data)
        }

    });

});
});

---

（其中，

jQueryXXX

应该是

callback

querystring参数的值）

我使用jsonp，因为我读到它是一种轻松绕过cors的方法。我不明白为什么数据会被发送到响应头，我不知道如何解决这个问题。@Joey如果你需要解决跨域的问题，JSONP可能是你应该使用的。数据是标题的一部分的原因是，标题和正文数据之间应该有一个空行。这取决于您的服务器实现如何实现这一点，但它可以像在JS字符串前面加换行符一样简单。我得到一个

未捕获的语法错误：意外标记“

现在。但仍然不会调用成功/错误。可能是因为语法错误？是的。您可能正在发回一个JSON字符串，而不是一个调用回调函数的有效JS响应（请参见我的答案）。我使用jsonp是因为我读到它是一种轻松绕过cors的方法。我不明白为什么数据会被发送到响应头，我不知道如何解决这个问题。@Joey如果你需要解决跨域的问题，JSONP可能是你应该使用的。数据是标题的一部分的原因是，标题和正文数据之间应该有一个空行。这取决于您的服务器实现如何实现这一点，但它可以像在JS字符串前面加换行符一样简单。我得到一个

未捕获的语法错误：意外标记“

现在。但仍然不会调用成功/错误。可能是因为语法错误？是的。您可能正在发回一个JSON字符串，而不是调用回调函数的有效JS响应（请参阅我的答案）。