每个（）循环内的jQuery AJAX解决方案

Question

我注意到在.each（）循环中的jQuery中使用AJAX时遇到问题。执行脚本时，仅更新数据库中的第一条记录。

这是我的脚本：

function save(){
            var _userTypeId;
            var _userTypeName;
            var _isDeleted;
            var request;

            $("tr.recUserType").each(function(){
                $this = $(this);
                _userTypeId = $this.find("#userTypeId").html();
                _userTypeName = $this.find("#userTypeName").val();
                _isDeleted = $this.find("#isDeleted").val();

                request = $.ajax({
                    url: "save.php",
                    type: "POST",
                    data: {userTypeId: _userTypeId, userTypeName: _userTypeName, isDeleted: _isDeleted}
                });
            });

            request.done(function(){
                document.location.reload();
            });

            request.fail(function(){
                alert("Request Failed!");
            });
        }

以及save.php的内容：

<?php
include_once "globals.php";

dbConnect();

$isExisting = mysql_query("SELECT COUNT(userTypeId) AS userCount FROM userType WHERE userTypeId='".$_POST['userTypeId']."';");

$result = mysql_fetch_array($isExisting);

//original: if(!$result['userCount'] = 0) <-- This was a logical error
if($result['userCount'] != 0)
    mysql_query("UPDATE userType SET userTypeName='".$_POST['userTypeName']."', isDeleted='".$_POST['isDeleted']."' WHERE userTypeId='".$_POST['userTypeId']."';");
else
    mysql_query("INSERT INTO userType VALUES('', '".$_POST['userTypeName']."', '".$_POST['isDeleted']."');");

echo mysql_error();

dbClose();
?>

我已经读过我可以选择使用同步而不是异步，但是我也读过，这不是一个好习惯。

那么，我实际上如何异步完成此工作并解决问题？

Answer 1

jQuery的$ .ajax（）返回jQuery XMLHttpRequest对象（“ jqXHR”）。您正在将该对象存储到“ response”变量中。

您的问题是范围。您将所有 N 个jqXHR
存储到同一“请求”变量中。在循环结束时，“请求”仅指向最后一个jqXHR，因此，仅在您的LAST请求完成时才调用.done（）。

正如Karl Anderson指出的那样，您应该将所有jqXHR存储到一个数组中，一旦所有[qqXHR]完成后，就执行一个回调。

var XHRs = [];

// ...

$("tr.recUserType").each(function() {
    $this = $(this);
    _userTypeId = $this.find("#userTypeId").html();
    _userTypeName = $this.find("#userTypeName").val();
    _isDeleted = $this.find("#isDeleted").val();

    XHRs.push($.ajax({
        url: "save.php",
        type: "POST",
        data: {userTypeId: _userTypeId, userTypeName: _userTypeName, isDeleted: _isDeleted}
    }));
});

$.when(XHRs).then(function() {
    document.location.reload();
});

另外，避免使用$ .ajax（）的“ async：false”的诱惑。浏览器将被迫挂起，直到请求完成为止，这很糟糕。您几乎总是可以异步完成$
.ajax（）调用。它可能需要一些技巧，但肯定会更好。