成功函数内的Jquery ajax调用

Question

我正在尝试在成功函数中进行 ajax 调用。在第二个 ajax 调用中，我将一些数据附加到隐藏字段。就在 for 循环之后，警报显示隐藏字段包含数据，但是当我将警报放在 secod 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 中设置您的元素所需的往返时间比处理下一个函数（在本例中为您的以下警报）所需的时间长。所以在调用 alert 时没有任何东西进入 DOM。您可以通过以下几种方式执行此操作：1) 为成功创建回调，或 2) 通过使用“async: false”设置强制 $.ajax 为非异步。我个人会选择回调方法并在其中处理所有成功代码。除非您使 ajax 调用非异步，否则您可能永远不会从该警报返回数据，无论您与服务器的连接有多快......即使它在同一台机器上是本地的。

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