我在多页表单中使用 jQuery mobile。当用户单击标记为Next Page的按钮时，我想运行 AJAX 请求。根据 AJAX 请求的结果，我想阻止用户访问下一页。
我相信我遇到的问题是我的 AJAX 请求比下一页事件需要更长的时间来回复。因此，它让用户进入下一页而不让 AJAX 请求完成。
至少我认为这就是正在发生的事情。有没有人遇到过这个问题或知道这个问题的解决方案？
HTML：
<div id="page1" data-role="page">
<div data-role="header" data-position="fixed" data-theme="d">
<a href="#page2" data-role="button" id="btnPage2" class="ui-btn-right" data-icon="arrow-r">Next Page</a>
</div>
<div role="main" class="ui-content">
<label for="testVal">Test Val:</label>
<input type="text" id="testVal" name="testVal"/>
</div>
</div>
<div id="page2" data-role="page">
<div role="main" class="ui-content">
</div>
</div>
jQuery：
$('#btnPage2').click(function(){
var isValid = '';
var aValue = $('#testVal').val();
$.ajax({
type: "POST",
url: "php-file.php",
data: {"something":aValue },
success: function(data){
var json = $.parseJSON(data);
if(json.hasOwnProperty('error')){
console.log("the user is not allowed on page 2");
isValid = false;
}else{
isValid = true;
}
}
});
if(!isValid){
alert('sorry you can not enter page 2');
return false;
}
});
在上面的代码示例中，当我单击“下一页”按钮（即#btnPage2）时，它允许我访问第 2 页，即使当我检查控制台日志并且我看到“第 2 页上不允许该用户”时也是如此。
更新：
我尝试将代码调整为以下。它有点工作，但只有在不允许用户访问 page2 时。 e.preventDefault正在让 ajax 完成，但是，我想不出一种强制更改 page2 的方法。如果允许用户访问 page2 行
$(":mobile-pagecontainer").pagecontainer("change", "#page2");
似乎是导致问题的原因......它只是创建了调用 pageChange 事件的无限循环。我认为这是强制将页面更改为 page2 的方法，但我认为我错了，我无法弄清楚如何强制它更改为 page2
$(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 修复，但我仍然遇到同样的问题。canNotPass当我在 ajax 设置为代码的情况下运行以下代码时，true似乎永远无法达到测试canNotPass. 因此，它永远不会被设置e.preventDefault，并且用户被允许访问 page2。
我认为该解决方案与设置延迟对象有关，该对象将允许 ajax 在页面更改发生之前完成。唯一的问题是我知道如何设置/使用延迟对象。