ajax成功内的Ajax调用不起作用

Posted 2023-02-22

【中文标题】ajax成功内的Ajax调用不起作用

【英文标题】：Ajax call inside an ajax success not working

【发布时间】：2017-06-11 14:24:40

【问题描述】：

我试图在另一个 Ajax 成功函数中进行 Ajax 调用，但不知何故它不起作用。我在控制台中收到以下错误。我不明白这是什么意思：

对象 readyState: 0, getResponseHeader: .ajax/v.getResponseHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), setRequestHeader: .ajax/v.setRequestHeader(), overrideMimeType: .ajax/v.overrideMimeType (), statusCode: .ajax/v.statusCode(), abort: .ajax/v.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), 然后: . Deferred/d.then()，还有 10 个……

我从对象中发现了类似下面的东西

statusText:"SyntaxError: 指定了无效或非法的字符串"

JS

 //Update the board with the moves so far made
    var updateBoard = function() 
        var style;
        $.ajax(
            type: "POST",
            url: "engine/main.php",
            data: code: 2,
            success: function(response) 
                if(response != "") 
                    var obj = JSON.parse(response);
                    lastClick = obj[obj.length - 1].player;
                    $(obj).each(function (i, val) 
                        if (val.player == 1) 
                            style = "cross";
                        
                        else if (val.player == 2) 
                            style = "circle";
                        
                        $('td[data-cell="' + val.cell + '"]').html(val.sign).addClass(style);
                    );

                    if(obj.length > 2) 
                        makeDecision();
                    
                
                else 
                    lastClick = null;
                    $('td').html("").removeClass();
                
                setTimeout(updateBoard, 1000);
            
        );
    ;
    updateBoard();

function makeDecision() 
        console.log('starting decision function');
        $.ajax(
            type: "engine/main.php",
            data: code: 3,
            success: function(winner) 
                console.log('end');
                console.log(winner);
            ,
            error: function(data) 
                console.log(data);
            
        );
    

PHP

if(isset($_POST['code'])) 
    $code = $_POST['code'];
    //Handle player number on game start
    if($code == 1) 
        if (!isset($_COOKIE['gamePlay'])) 
            header('Location: index');
        
        $playerCode = $_COOKIE['gamePlay'];
        $player = $playersHandler->getPlayer($playerCode);
        echo $player;
    
    // Update board with new moves
    else if($code == 2) 
        $currentPosition = $gameHandler->getMoves();
        echo $currentPosition;
    
    else if($code == 3) 
        $result = $code; //$gameHandler->decide();
        echo $result;
    
    //Reset Board
    else if($code == 4) 
        $gameHandler->reset();
    

【问题讨论】：

console.log(response); 上的输出是什么？

你的意思是在第一个 ajax 成功调用中？然后是一个JSON数组。

错误发生在哪一行？可能response 不是有效的 JSON，val.cell 在 jQuery 选择器中无效，或者val.sign 不是有效的 HTML。

第一次成功调用后，输入makeDecision function，但随后该函数内的ajax调用给出了我的问题中提到的错误。

【参考方案1】：

您在makeDecision 函数ajax 调用中将无效字符串传递给type 属性。您应该如下设置：

type: 'POST',
url: 'engine/main.php',
...

而不是

type: 'engine/main.php'

---

确保以下行

var obj = JSON.parse(response);

返回一个数组，而不是一个对象。如果obj 不是数组，那么obj.length 就是undefined

【讨论】：

哦！是的，你是对的！！确切地！我在那里犯了一个错误..该死的！但我仍然没有得到所需的输出

如果您看到 PHP sn-p 将 $code 分配给 $result 但在我的控制台中我得到空白。

你确定“obj.length > 2”是真的并且第二个ajax调用被执行了吗？不幸的是，如果没有实际的工作示例，我将无法调试 :)

在解析 json 响应后，我刚刚在第一个 ajax 成功调用中记录了我的 obj.length，目前它是 3。然后我在 makeDecision 中将输出记录为 starting decision function，它也被记录了.甚至我也从它的成功函数中得到了输出，但它只是空白。

记录obj 我明白了["cell":"0","sign":"✘","player":1,"cell":"4","sign":"◯","player":2,"cell":"2","sign":"✘","player":1]

【参考方案2】：

你不能在javascript中直接获取对象的长度obj.length。所以如果你得到正确的响应。像这样获取解析对象的长度..

var length = Object.keys(obj).length;

然后

lastClick = obj[length-1].player;

像这样正确使用$.each..

$.each(obj,function (i, val)
//code

);

【参考方案3】：

您可以像这样在 ajaxComplate 事件中再次调用 ajax：

$( document ).ajaxComplete(function() 
   $.ajax(
            type: "post",
            url: 'engine/main.php',
            data: code: 3,
            success: function(winner) 
                console.log('end');
                console.log(winner);
            ,
            error: function(data) 
                console.log(data);
            
        );
);

【讨论】：

为什么是document？实际上我在我的脚本中提出了不止一个 Ajax 请求，那么文档会起作用吗？

是的，它会起作用的。如果你想在 Ajax 中再次添加 Ajax 事件，那么你可以使用 ajaxComplate 事件。

如何将事件处理程序附加到 updateBoard 函数。

你可以像complete: function(e) console.log("After complete"); 那样在ajax函数中使用complete事件

@AtaurRahmanMunna 那就是说，成功功能会在那里加上一个完整的功能要添加？