jquerymobilemultipage在切换页面之前等待ajax返回数据

我正在以多页形式使用jQuery mobile。当用户单击标有“下一页”的按钮时，我想运行一个AJAX请求。根据AJAX请求的结果，我希望阻止用户访问下一页

我相信我遇到的问题是，我的AJAX请求需要比下一个页面事件更长的时间来回复。因此，它允许用户进入下一页，而不允许AJAX请求完成

至少我认为这是正在发生的事情。以前有没有人遇到过这个问题，或者知道这个问题的解决方案

HTML: 在上面的代码示例中，当我单击下一页按钮（即

#btnPage2

）时，它允许我访问第2页，即使我检查控制台日志并看到“第2页不允许用户”

更新： 我尝试将代码调整为以下内容。它可以工作，但只有当用户不允许访问第2页时

e.preventDefault

允许ajax完成，但我想不出强制更改第2页的方法。如果允许用户访问第2页，则该行

$（“：mobile pagecontainer”）.pagecontainer（“更改”，“第2页”）

似乎是问题的根源……它只是创建了一个调用pageChange事件的无休止循环。我原以为这是强制将页面更改为第2页的方法，但我认为我错了，我不知道如何强制将页面更改为第2页

$(document).bind('pagebeforechange', function(e, data) {
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#page1' && to === '#page2') {
        e.preventDefault();
        var aValue = $('#testVal').val();
            $.ajax({
                type: "POST",
                url: "php-file.php",
                data: {"something":aValue },
                cache: false,
                success: function(data){
                    var json = $.parseJSON(data);
                    if(json.hasOwnProperty('canNotPass')){
                        alert('Sorry you can not view page 2');
                    }else{
                        ///  if json does not contain canNotPass then continue to page2 
                        $(":mobile-pagecontainer").pagecontainer("change", "#page2");
                    }
                },
                beforeSend: function() {
                    $.mobile.loading("show");
                },
                complete: function() {
                    $.mobile.loading("hide");
                }
            });   
        }            
    }
});

更新#2
我尝试实现@deblocker fix，但仍然遇到同样的问题。当我在ajax将
canNotPass
设置为
true
的情况下运行下面的代码时，代码似乎从未达到测试
canNotPass
值的程度。因此，它永远无法设置
e.preventDefault
，并且允许用户访问第2页

我认为解决方案与设置一个延迟对象有关，这将允许ajax在页面更改发生之前有时间完成。唯一的问题是我知道如何设置/使用延迟对象

使用按钮而不是锚定：

<button id="btnPage2" class="ui-btn-right ui-icon-arrow-r">Next Page</a>

更新：

按照Omar的建议，在
pagecontainerbeforechange
处理程序的第一部分中，您应该中断导航，因为您已经到了第2页的一半。因此，您不再需要告诉
pagecontainer
在
pagecontainerbeforechange
事件中切换到第2页。您只需将ajax请求和您的
canNotPass
标记保留在
$（“#btnPage2”）中即可。单击（）

演示：


$（文档）。在（“PageContainerBeforChange”上，函数（e，ui）{
var from=“#”+$（“：mobile pagecontainer”）.pagecontainer（“getActivePage”）.prop（“id”）；
var to=ui.toPage；
if（type of ui.toPage==“string”）{
var u=$.mobile.path.parseUrl（to）；
to=u.hash | |“#”+u.pathname.substring（1）；
如果（从==“#第一页”&&to==”#第二页）{
var canNotPass=！$（“#canPass”）.prop（“选中”）；
如果（不能通过）{
e、 预防默认值（）；
$.mobile.activePage.find（'.ui-btn-active'）.removeClass（'ui-btn-active'）.blur（）；
}
}
}
});

首页
可以导航到第2页吗？
页脚
第二页
页脚
感谢您在这个问题上花费了这么多时间。不幸的是，我无法在不干扰页面其他交互的情况下实现您的建议。下面列出了我提出的唯一有效的解决方案。不幸的是，此解决方案不使用处理页面更改事件的内置哈希函数。我只是使用一个普通的按钮，并将click listener分配给它。有点笨重，但在我的情况下，这似乎是唯一可行的方法

转到第2页

这听起来很难听，
var isValid=''
（字符串），然后
isValid=true
（布尔值）在这里你会找到一篇关于这个主题的Omar文章。正确答案。我还添加了一些代码，防止用户通过直接输入URL访问页面，因为它是一个多页面模型，toPage应该是一个“字符串”，仅此而已。@Omar感谢您的建议。我试着实现你建议的代码，但我一辈子都不知道如何让它工作。我最终用我的想法更新了我的帖子。我走对了吗？还是遇到了问题。我用你的最新建议建立了一个JSFIDLE，并编辑了我的原始帖子。也许你可以看一眼@Austin deblocker您可以在答案中包含代码。@Omar请尝试像我在更新2中所做的那样，将实际的ajax表达式组合在一起。将变量设置为true并对其进行测试可以很好地工作，但是ajax调用它似乎是导致问题的原因。一旦引入ajax调用，代码就不再工作。
$(document).bind('pagebeforechange', function(e, data) {
    var to = data.toPage,
        from = data.options.fromPage;

    if (typeof to === 'string') {
        var u = $.mobile.path.parseUrl(to);
        to = u.hash || '#' + u.pathname.substring(1);
        if (from) from = '#' + from.attr('id');

        if (from === '#page1' && to === '#page2') {
        e.preventDefault();
        var aValue = $('#testVal').val();
            $.ajax({
                type: "POST",
                url: "php-file.php",
                data: {"something":aValue },
                cache: false,
                success: function(data){
                    var json = $.parseJSON(data);
                    if(json.hasOwnProperty('canNotPass')){
                        alert('Sorry you can not view page 2');
                    }else{
                        ///  if json does not contain canNotPass then continue to page2 
                        $(":mobile-pagecontainer").pagecontainer("change", "#page2");
                    }
                },
                beforeSend: function() {
                    $.mobile.loading("show");
                },
                complete: function() {
                    $.mobile.loading("hide");
                }
            });   
        }            
    }
});

<button id="btnPage2" class="ui-btn-right ui-icon-arrow-r">Next Page</a>

$.ajax({
  type:...
  url:...
  data:...
  success: ...
  beforeSend: function() {
    $.mobile.loading("show");
  },
  complete: function() {
    $.mobile.loading("hide");
  },
  error: function (request,error) {
    alert('sorry you can not enter page 2');
});

$(document).ready(function(){
    $("#btnPageNew").click(function(){
        var testVal = $('#testVal').val();
        var canNotPass = promiseTest(testVal);
            canNotPass.done(function(data){
                var json = $.parseJSON(data);
                    console.log(json);
                    if(json.hasOwnProperty('error')){
                        // user can not access the next page
                        console.log('can not pass');
                        $.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active').blur();
                    }else{
                        // allow user to access the next page
                        $(":mobile-pagecontainer").pagecontainer("change", "#page2");
                    }
            });


    });
});

function promiseTest(aValue){
    return $.ajax({
                type: "POST",
                url: "php-file.php",
                data: {"something":aValue  },
                cache: false
            });
}