在这个大型网络应用程序的简化示例中,考虑一个简单的注册表单,其中包含以下字段:用户名、名字、姓氏和注册按钮 type="button"
。
<form action="" method="post" id="cns_form">
<table id="companyTable"><tr>
<td width="200">
First name*:<br />
<input type="text" id="first_name" name="first_name">
</td>
<td width="200">
Last name*:<br />
<input type="text" id="last_name" name="last_name">
</td>
</tr></table>
<input type="button" value="Register" id="register" >
</form>
<div id="alert" title="Alert"></div>
完成用户名字段后,jQuery 会触发数据库的 ajax 搜索以查看该用户名是否已存在。当点击 Register 时也会触发相同的搜索(出于从这个简化示例中删除的原因)。
问题:离开用户名字段时一切正常。但是,在单击注册 后,如果用户名已经存在,我不知道如何检索 AJAX 搜索的结果并停止提交表单。我尝试了各种不同的方法,但已将代码返回到此状态,因此读者最容易获得帮助。
例如,我尝试整合来自 this question 的建议解决方案,但我没有成功地将它应用到我的情况...我尝试在 ajax 函数中设置 async:false
...我还尝试从 checkForm 函数内部调用 checkUsername(uname),但是也没有用。有一点帮助吗?
jQuery 文档准备就绪:
$(function(){
$('#username').blur(function() {
var uname = $.trim($(this).val());
checkUsername(uname);
}); //END BLUR username
$('#register').click(function() {
var uname = $.trim($( '#username').val());
checkUsername(uname);
checkForm();
});
}); //END document.ready
AJAX 调用:
function checkUsername(uname) {
if (uname != '') {
$.ajax({
type: "POST",
url: 'ajax/ax_all_ajax_fns.php',
data: 'request=does_this_username_already_exist&username=' + uname,
async: false,
success:function(data){
//alert('Returned AJAX data: '+data);
if (data != 0) {
var existing_user = data.split('|');
var fn = existing_user[0];
var ln = existing_user[1];
focus_control = 'username';
$( '#alert' ).html( 'That username is already in use by ' + fn +' '+ ln +'. Please choose another.' );
$( '#alert' ).dialog( 'open' );
} //EndIf data<>0
} //End success
}); //End $.ajax
} //End If this.val <> ""
}
检查表单函数:
function checkForm() {
var un = $.trim($( '#username').val());
var fn = $( '#first_name').val();
var ln = $( '#last_name').val()
if (un=='' || fn=='' || ln=='') {
$( '#alert' ).dialog({
height: 200,
width: 300,
});
$( '#alert' ).html( 'Fields marked with an asterisk are required.' );
$( '#alert' ).dialog( 'open' );
} else {
$("#cns_form").submit();
}
}
最佳答案
一个人在回答自己的问题时既高兴又哭泣,但现在就开始吧。解决方案是将 checkUsername() 函数作为输入参数发送到 checkForm() 函数,并使 checkUserName() 函数返回一个我们可以在 checkForm() 内部检查的值。
因此,我们必须这样修改$('#register').click
函数:
$('#register').click(function() {
var uname = $.trim($( '#username').val());
checkForm(checkUsername(uname)); //<===========================
});
然后 checkUsername() 函数,因此:
function checkUsername(uname) {
var returnVal = 0; //<=================================
if (uname != '') {
$.ajax({
type: "POST",
url: 'ajax/ax_all_ajax_fns.php',
data: 'request=does_this_username_already_exist&username=' + uname,
async: false,
success:function(data){
//alert('Returned AJAX data: '+data);
if (data != 0) {
var existing_user = data.split('|');
var fn = existing_user[0];
var ln = existing_user[1];
focus_control = 'username';
$( '#alert' ).html( 'That username is already in use by ' + fn +' '+ ln +'. Please choose another.' );
$( '#alert' ).dialog( 'open' );
returnVal = 0; //<============================
} //EndIf data<>0
} //End success
}); //End $.ajax
} //End If this.val <> ""
return returnVal; //<==============================
}
AND checkform() 函数因此:
function checkForm(exists) { //<============================
alert('sub checkForm(). value of exists: ' + exists);
if (exists==9) { //<================================
$( '#alert' ).html( 'That username is already in use' + existing +'. Please choose another.' );
$( '#alert' ).dialog( 'open' );
}else{ //<==========================================
var un = $.trim($( '#username').val());
var fn = $( '#first_name').val();
var ln = $( '#last_name').val()
if (un=='' || fn=='' || ln=='') {
$( '#alert' ).dialog({
height: 200,
width: 300,
});
$( '#alert' ).html( 'Fields marked with an asterisk are required.' );
$( '#alert' ).dialog( 'open' );
} else {
$("#cns_form").submit();
}
} //<===================================================
}
感谢 Felix Kling this helpful post 的荣誉.
关于javascript - 从不同的 Javascript 函数检索 AJAX 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14738631/