Question

我正在尝试使用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

感谢您提前回复。

Answer 1

我假设你不想在按下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 - 例如。

Answer 2

您可以检查Jeroen所描述的密钥代码（这将节省您对服务器的调用），或者在帖子检查评估为false时从您的php脚本返回一个空数组（json编码）。

Answer 3

谢谢大家的建议！

最后，将dataType添加到$ .AJAX（）帮助！我添加了dataType：＆＃39; json＆＃39;进入AJAX调用并从回调中删除.parseJSON（），我不再遇到任何错误。

再次，非常感谢@ADASein

jQuery AJAX：意外的输入结束

3 个答案: