【发布时间】：2017-09-27 01:21:34
【问题描述】：
我在多页表单中使用 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 修复，但仍然遇到同样的问题。当我在 ajax 将canNotPass 设置为true 的情况下运行以下代码时，代码似乎永远不会达到测试canNotPass 的值的地步。因此，它永远不会设置e.preventDefault，并且允许用户访问page2。
我认为解决方案与设置延迟对象有关，该对象将允许 ajax 在页面更改发生之前完成。唯一的问题是我知道如何设置/使用延迟对象。
【问题讨论】：
-
听起来很丑，
var isValid = ''（字符串），然后isValid = true（布尔） -
在这里 pagecontainerbeforechange – How to use it 你会发现 Omar 关于这个主题的精彩帖子。
标签： jquery ajax jquery-mobile jquery-mobile-ajax