Ajax 从不成功：使用 xhrFields 时

Question

我无法success在我的 ajax 请求中触发调用。我知道通信工作正常，但是我的PHP脚本中的最后一个调用return json_encode($array);将触发，就好像它是 onprogress 对象的一部分一样。我想“中断” onprogress 调用并return json_encode在 PHP 脚本终止时通过发送的最后一个数据运行成功函数......这是我的 AJAX 调用：$( document ).ready(function(e) {    var jsonResponse = '', lastResponseLen = false;       $("#btn_search").click(function(e){      var firstname = document.getElementById('firstname').value;      var lastname = document.getElementById('lastname').value;        $.ajax({          type: "POST",          url: 'search.php',          data: $('#search_fields').serialize(),          dataType: "json",          xhrFields: {                onprogress: function(e) {                    var thisResponse, response = e.currentTarget.response;                    if(lastResponseLen === false) {                        thisResponse = response;                        lastResponseLen = response.length;                    } else {                        thisResponse = response.substring(lastResponseLen);                        lastResponseLen = response.length;                    }                    jsonResponse = JSON.parse(thisResponse);                    document.getElementById('progress').innerHTML = 'Progress: '+jsonResponse.msg;                }            },            success: function(data) {                console.log('done!');                document.getElementById('progress').innerHTML = 'Complete!';                document.getElementById('results').innerHTML = data;            }        });        e.preventDefault();    });});这是基本的 PHP 服务器脚本：<?phpfunction progress_msg($progress, $message){  echo json_encode(array('progress' => $progress, 'msg' => $message));  flush();  ob_flush();}$array = array('msg' => 'hello world');$count = 0;while($count < 100){     progress_message($count, "working....");     $count += 10;     sleep(2);}return json_encode($array);?>

Answer 1

我让你的代码正常工作，有 2 个错误。首先，在你的 while 循环中，你的函数名不正确，试试这个：

progress_msg($count, "working... ." . $count . "%");

其次，最后一行不输出任何内容，因此从技术上讲，您不会得到“成功”的 json 返回。将服务器脚本的最后一行更改为：

return json_encode($array);

到：

echo json_encode($array);

更新：带有hacky解决方案的完整工作代码：

阿贾克斯：

$( document ).ready(function(e) {

    var jsonResponse = '', lastResponseLen = false;   

    $("#btn_search").click(function(e){

      var firstname = document.getElementById('firstname').value;

      var lastname = document.getElementById('lastname').value;

        $.ajax({

          type: "POST",

          url: 'search.php',

          data: $('#search_fields').serialize(),

          xhrFields: {

                onprogress: function(e) {

                    var thisResponse, response = e.currentTarget.response;

                    if(lastResponseLen === false) {

                        thisResponse = response;

                        lastResponseLen = response.length;

                    } else {

                        thisResponse = response.substring(lastResponseLen);

                        lastResponseLen = response.length;

                    }

                    jsonResponse = JSON.parse(thisResponse);

                    document.getElementById('progress').innerHTML = 'Progress: '+jsonResponse.msg;

                }

            },

            success: function(data) {

                console.log('done!');

                dataObjects = data.split("{");

                finalResult = "{" + dataObjects[dataObjects.length - 1];

                jsonResponse = JSON.parse(finalResult);

                document.getElementById('progress').innerHTML = 'Complete!';

                document.getElementById('results').innerHTML = jsonResponse.msg;

            }

        });

        e.preventDefault();

    });

搜索.php：

<?php

function progress_msg($progress, $message){

  echo json_encode(array('progress' => $progress, 'msg' => $message));

  flush();

  ob_flush();

}

$array = array('msg' => 'hello world');

$count = 0;

while($count <= 100){

     progress_msg($count, "working... " . $count . "%");

     $count += 10;

     sleep(1);

}

ob_flush();

flush();

ob_end_clean();

echo json_encode($array);

?>

ajax 调用的“成功”方法的问题在于它无法将返回的数据解释为 JSON，因为完整的返回是：

{"progress":0,"msg":"working... 0%"}{"progress":10,"msg":"working... 10%"}{"progress":20,"msg":"working... 20%"}{"progress":30,"msg":"working... 30%"}{"progress":40,"msg":"working... 40%"}{"progress":50,"msg":"working... 50%"}{"progress":60,"msg":"working... 60%"}{"progress":70,"msg":"working... 70%"}{"progress":80,"msg":"working... 80%"}{"progress":90,"msg":"working... 90%"}{"progress":100,"msg":"working... 100%"}{"msg":"hello world"}

这不是一个有效的 JSON 对象，而是一个接一个的多个 JSON 对象。

我尝试使用 删除所有以前的输出ob_end_clean();，但由于某种原因我无法弄清楚，它在我的设置中不起作用。因此，相反，我想出的 hacky 解决方案是不将返回视为 JSON（通过dataType从 AJAX 调用中删除参数），并简单地用字符串操作拆分出最终的 Json 元素......

必须有一个更简单的解决方案，但如果不使用 XHR 和 Ajax 的第三方 jQuery 库，我找不到任何解决方案。