javascript - jquery ajax 在 success 函数中调用

Question

我正在尝试在 success 函数内进行 ajax 调用。在第二个 ajax 调用中，我将一些数据附加到隐藏字段。就在 for 循环之后，警报显示隐藏字段包含数据，但是当我将警报放在第二个 ajax 调用之外时，它显示为空。为什么隐藏字段被清除？

<input type="hidden" id="hdnMenuChild" name="hdnMenuChild" />

            <script>
                function loadMenue() {

                    var url = "/UserManagement/GetUserMenue";

                    $.ajax({
                        type: "GET",
                        url: url,
                        contentType: "application/json; charset=utf-8",
                        //data: { initialApplicantID: initialApplicantID },
                        dataType: "json",
                        success: function (data) {
                            var mUL = "";
                            for (var x = 0; x < data.length; x++) {

                                if (data[x].MenueLevel == "0" && data[x].URL!="#") {

                                    mUL = mUL + '<li>';
                                    mUL = mUL + '<a href=' + data[x].URL + '>';
                                    mUL = mUL + '<span class="menu-text">' + data[x].Name + '</span>';
                                    mUL = mUL + '</a></li>';
                                }

                                if (data[x].MenueLevel == "0" && data[x].URL == "#") {

                                    mUL = mUL + '<li>';
                                    mUL = mUL + '<a href=' + data[x].URL + ' class="dropdown-toggle">';
                                    mUL = mUL + '<span class="menu-text">' + data[x].Name + '</span>';
                                    mUL = mUL + '<b class="arrow icon-angle-down"></b>';
                                    mUL = mUL + '</a>';
                                    mUL = mUL + '<ul class="submenu">';

                                    $.ajax({
                                        type: "GET",
                                        url: "/UserManagement/GetUserMenue?parentID=" + data[x].PermissionID,
                                        contentType: "application/json; charset=utf-8",
                                        //data: { initialApplicantID: initialApplicantID },
                                        dataType: "json",
                                        success: function (datay) {

                                            for (var y = 0; y < datay.length; y++) {

                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '<li>');
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '<a href=' + datay[y].URL + '>');
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '<i class="icon-double-angle-right"></i>');
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + datay[y].Name);
                                                $("#hdnMenuChild").val($("#hdnMenuChild").val() + '</a></li>'); 
                                            }
                                           alert($("#hdnMenuChild").val());//here, alert shows data.
                                        }
                                    });
                                   alert($("#hdnMenuChild").val());//alert shows empty data here
                                    mUL = mUL + '</ul>';
                                    mUL = mUL + '</li>';
                                }

                            }

                            $("#userMenue").html(mUL);
                        }
                    });


                }

Answer 1

您是否验证了整个过程完成后隐藏字段未填充到 DOM 中。请记住，$.ajax 默认情况下是异步的，第二个 ajax 调用返回并在 DOM 中设置元素所需的往返时间比处理下一个函数(在本例中为以下警报)所需的时间要长。因此，在调用警报时，还没有任何内容到达 DOM。您可以通过多种方式执行此操作:1)创建成功回调，或 2)使用“async: false”设置强制 $.ajax 为非异步。我个人会选择回调方法并处理其中的所有成功代码。不过，除非您将 ajax 调用设置为非异步，否则您可能永远不会从该警报返回数据，无论您与服务器的连接有多快……即使它在同一台计算机上是本地的。

此外，我确信您有充分的理由，但循环从 ajax 调用返回的数据，然后为该数据中的每个项目调用另一个 ajax 调用似乎效率很低。我不知道服务器代码是否不可用或在您的控制之下，但可能应该在服务器上创建一个新的端点，以返回您在第二个 ajax 调用中需要的所有数据。只是一个想法。