jQuery-Mobile：ajax请求在changePage失败后停止工作

Posted 2021-05-06

我目前正在使用jQuery mobile开发一个Web应用程序。但是，我发现当“changePage”失败时，我无法再发送ajax请求。失败后，所有ajax请求都会返回错误。这是单击表单上的提交按钮时执行的代码（这是一个基本的用户登录屏幕）：

// Event when user click the Submit login button
$('#submitLogin').on("click", function () {

        // submit the user credentials to the server
        $.ajax({
            type: "POST",
            url: "./LogUser",
            data: {
                EmployeeID: $('#EmployeeID').val(),
                EmployeePIN: $('#EmployeePIN').val()
            },
            dataType: "text",
            async: true,
            cache: false,
            error: function (rqst, text, thrownError) {
                $('#dlg-login-error-message').text(thrownError);
                $('#dlg-login-error-popup').popup("open");
            },
            success: function (data) {
                if (data == "Success") {
                    $.mobile.changePage("./LoadScreen/Menu");
                }
                else {
                    $('#dlg-login-error-message').text(data);
                    $('#dlg-login-error-popup').popup("open");
                }
            }
        });

    return false;
});

如果帖子本身失败，我可以毫无问题地重新提交。如果.mobile.changePage失败，则显示“找不到页面”，但我无法重新提交，ajax不再向服务器发出请求并直接跳转到“未找到”错误的错误回调。

我猜这个问题来自jQuery mobile使用AJAX请求加载页面的事实，并且不知何故，ajax调用在某处混淆了。

我做了更多测试，甚至拦截了pageloadfailed事件，但没有任何效果。页面更改失败后，AJAX调用不再向服务器发送任何内容并自动跳转到错误回调函数。

我试过async = false，同样的问题。我试过调试jQuery-mobile，但我仍然无法找到“changePage”函数本身（.code非常混乱）。

我刚刚花了两天时间试图找到解决这个问题的方法，并且我正在认真考虑使用除了jQuery-mobile之外的其他东西进行开发。

答案

我找到了解决问题的方法，但我还不知道这个解决方案的全部影响。

为了防止这个问题，我不得不将“pushStateEnabled”配置选项设置为“false”。

因此，如果您发现自己遇到同样的问题，请在加载“jQuery-mobile”脚本之前尝试将以下内容放入脚本中。

    $(document).bind("mobileinit", function () {
        $.mobile.pushStateEnabled = false;
    });

例：

<!-- Load the script for jQuery -->
<script src="~/Scripts/jquery-2.1.4.js"></script>

<!-- Set default for jQuery-Mobile, before it is actually loaded -->
<script>

    $(document).bind("mobileinit", function () {
        $.mobile.pushStateEnabled = false;
    });

</script>

<!-- Load the script for jQuery-Mobile -->
<script src="~/Scripts/jquery.mobile-1.4.5.js"></script>