AJAX请求有时会出现故障

时间:2018-02-17 01:38:25

标签: javascript jquery node.js ajax express

我遇到了POST和GET请求的问题。在我的服务器端,直到我发送的那一刻我有我的期望但是在我的客户端我得到的东西不按顺序。例如,这两个应该与我在这里的顺序相反:

从服务器发送{"网格":["","","","&# 34;,"""""""""&#34],& #34;胜者":""}
收到服务器:{" grid":[" X","","","" """""""""&#34],&#34 ;胜者":""}



function sendData(json) {
        $.ajax({
           type: "POST",
           url: "/ttt",
           data: json,
           dataType: "json",
           success: receiveData()
        });
    }

function receiveData() {
   
    var response = $.ajax({
        type: "GET",
        url: "/ttt",
        dataType: "json",
        success: function(){
            grid = response.responseJSON;
            console.log("Receved at client: " + JSON.stringify(grid));
        }
    });
   console.log("Also after receiving " + JSON.stringify(grid));
}



 给我:
在收到{" grid":[" X","""""" """""""""&#34],"得主":""}
在客户处收到:{" grid":[" X"," O","","" """""""""&#34],&#34 ;胜者":""}
我认为这可能是两个不同的问题。一个用于解决问题,另一个用于解决为什么我的网格在我的GET请求中的成功子句功能之后不反映更改。

1 个答案:

答案 0 :(得分:3)

你犯了一个常见的错误。您需要在receiveData处使用没有parens的函数引用。改变这个:

function sendData(json) {
    $.ajax({
       type: "POST",
       url: "/ttt",
       data: json,
       dataType: "json",
       success: receiveData()
    });
}

到此:

function sendData(json) {
    $.ajax({
       type: "POST",
       url: "/ttt",
       data: json,
       dataType: "json",
       success: receiveData     // no parens here
    });
}

当你包含parens时,它会调用函数IMMEDIATELY并将函数的返回值作为成功处理程序,因此你会看到它们无序运行。您希望传递函数引用,以后可以调用它。函数引用是没有parens的函数名称。

receiveData()中,您似乎还有另一个错误。你使用错误的东西来回应。响应不是来自$.ajax()的回复。响应将传递给成功处理程序。

我不确切地知道您的回答应该是什么样子,但改变了这一点:

function receiveData() {

    var response = $.ajax({
        type: "GET",
        url: "/ttt",
        dataType: "json",
        success: function(){
            grid = response.responseJSON;
            console.log("Receved at client: " + JSON.stringify(grid));
        }
    });
   console.log("Also after receiving " + JSON.stringify(grid));
}

这样的事情:

function receiveData() {

    $.ajax({
        type: "GET",
        url: "/ttt",
        dataType: "json",
        success: function(response){
            grid = response.responseJSON;
            console.log("Received at client: " + JSON.stringify(grid));
            console.log("Also after receiving " + JSON.stringify(grid));
        }
    });
}

并且,因为您的ajax调用是异步的,所以您也将此语句console.log("Also after receiving " + JSON.stringify(grid));放在错误的位置。如果你想在修改后看到网格的结果,那么你必须把它放在成功处理程序中。

修正摘要

  1. success: receiveData()更改为success: receiveData
  2. 使用response,因为它已传递给成功处理程序。
  3. console.log()放入success处理程序中查看最终结果。
  4. 看起来您可能无法完全理解ajax调用是如何异步的以及这对您的编程意味着什么。我建议做一些搜索和阅读该主题。学习现在可以在你发展的过程中为你节省很多痛苦。