我正在尝试使用AJAX检查输入的值。每次用户按下一个键,AJAX就会被发送,然后根据服务器的结果,我会将有效或无效的类添加到输入中。
.js:
$("input[name=username]").keyup(function(event) {
processAJAXCheck(this,"username");
});
$("input[name=username]").change(function(event) {
processAJAXCheck(this,"username");
});
function processAJAXCheck(element, toCheck) {
contentOfInput = $(element).val();
$.ajax({
url: "ajax.php",
type: "POST",
data: {content: contentOfInput, toCheck: toCheck},
success: afterAJAXResponse
});
}
function afterAJAXResponse(data) {
result = $.parseJSON(data);
if(result['toCheck'] != undefined) {
inputSelector = 'input[name='+result['toCheck']+']';
if(result['result'] == true) {
$(inputSelector).removeClass('invalid');
$(inputSelector).addClass('valid');
formValid = true;
} else {
$(inputSelector).removeClass('valid');
$(inputSelector).addClass('invalid');
formValid = false;
}
}
result = null;
}
PHP代码:
if(isset($_POST['toCheck']) && isset($_POST['content'])
&& $_POST['toCheck'] != "" && $_POST['content'] != "")
{
require_once 'classes/AAA.php';
require_once 'classes/Database.php';
require_once 'etc/settings.php';
$db = new Database($GLOBALS['db_server'],$GLOBALS['db_name'],$GLOBALS['db_user'],$GLOBALS['db_pass']);
$aaa = new AAA($db);
switch($_POST['toCheck'])
{
case 'email':
$output['result'] = $aaa->isUsableEmail($_POST['content']);
$output['toCheck'] = 'email';
break;
case 'username':
$output['result'] = $aaa->isUsableUsername($_POST['content']);
$output['toCheck'] = 'username';
break;
default:
$output['result'] = 'error';
break;
}
echo json_encode($output);
}
奇怪的是,当我按下任何字符键时,一切都能顺利进行。但当我按下"Tab"切换到另一个输入时(它使用相同的功能,但不会返回任何错误-当我在那里按下Tab时!)我会得到以下错误:
Uncaught SyntaxError: Unexpected end of input b.extend.parseJSON
jquery-1.9.1.min.js:3 afterAJAXResponse
registration.php?school_id=1&department_id=1:189 b.Callbacks.c
jquery-1.9.1.min.js:3 b.Callbacks.p.fireWith jquery-1.9.1.min.js:3 k
jquery-1.9.1.min.js:5 b.ajaxTransport.send.r
感谢您提前回复。
我假设您不想在按下tab键时调用ajax函数。但是,您没有检查这一点,keyup
也会捕获您的选项卡单击事件。
您应该更改:
$("input[name=username]").keyup(function(event) {
processAJAXCheck(this,"username");
});
类似于:
$("input[name=username]").keyup(function(event) {
if (event.keyCode !== 9) { // I think it's 9...
processAJAXCheck(this,"username");
}
});
例如,您也可以添加输入-13
。
您可以检查Jeroen描述的密钥代码(这将为您节省对服务器的调用),也可以在后检查结果为false时从php脚本返回一个空数组(json编码)。
感谢大家的建议!
最后,将dataType添加到$.AAJAX()中有帮助!我已经在AJAX调用中添加了dataType:'json',并从回调中删除了.parseJSON(),我不再遇到任何错误。
再次感谢@ADASein