Question

Jquery的：

<script type="text/javascript">
$(document).ready(function(){
    $("form.register").change(function() {
        $.post("check.php", $("form.register").serialize(), function( data ) {
            if( data.username == "inuse" )
                $("p#username_error").slideDown();
            else
                $("p#username_error").hide();
            if( data.password == "missmatch" )
                $("p#password_error").slideDown();
            else
                $("p#password_error").hide();
            if( data.email == "notvalid" )
                $("p#email_error").slideDown();
            else
                $("p#email_error").hide();


        }, "json");
    });

    $("form.register").unbind('submit');
    $("form.register").submit(function(e) {
        e.preventDefault();

    //  $.post("register.php", $("form.register").serialize() function( data ) {

        $("p#submit_error").slideDown();

    //  alert("Data Loaded: " + data);
    //  alert("Data Loaded: " + data.submit);

    //  }, "json");

        return false;

        }); 

});
</script>

不起作用的代码是$("form.register").submit(function(){...}部分。

这是我的HTML：

<form action="register.php" method="post" class="register">
    <fieldset>
        <legend>registration</legend>
        <input type="text" name="username" value="" />
        <label>desired username</label>
        <p id="username_error" class="error">That Username is unavailable</p>
        <input type="password" name="password" value="" />
        <label>password</label>
        <input type="password" name="password_again" value="" />
        <label>password Again</label>
        <p id="password_error" class="error">Passwords do not match</p>
        <input type="text" name="email" value="" />
        <label>email</label>
        <p id="email_error" class="error">Email is not valid</p><br />
        <input type="submit" name="submit" value="register" />
        <p id="submit_error" class="error">test</p>
    </fieldset>
</form>

register.php：

$data = array( "submit" => "test" );
echo json_encode( $data );

我是jquery，ajax和javascript的新手。但是从我的理解。当我在注册表单中单击提交时，我将所有值提交到register.php，并以"test"回复。我的jquery javasript然后执行：

if( data.submit == "test" )
    $("p#submit_error").slideDown();

应该删除此信息

<p id="submit_error" class="error">test</p>

但是当我点击提交时没有任何反应..

Answer 1

AJAX代表异步 JavaScript和XML。这意味着$.post实际上会在收到响应之前返回（稍后异步调用回调函数）。因此，表格立即提交。

要停止此操作，请在提交事件处理程序的末尾插入return false;，这将停止表单提交。当响应到达时，决定是否要以正常方式提交表单。此代码可用于执行此操作：

// Unbind the submit event handler registered earlier
// so we do not make another AJAX request
$("form.register").unbind('submit');

// Actually submit the form
$("form.register").submit();

当然，如果你不需要，你不需要后面的代码。

注意：我建议的一件事是在AJAX请求期间禁用该按钮。这将确保当用户不必要地尝试“双击”按钮时，这将没有不利影响。一种方法是使用jQuery的.one method，这也避免了使用unbind的需要：

function submitButtonClicked() {
    $.post(..., function( data ) {

        ...

        // Submit form if data is valid
        $("form.register").submit();

        // Re-enable button if form was not submitted
        $("form.register").one('submit', submitButtonClicked);

    }, "json");

    // Cancel form submission
    return false;
}

$("form.register").one('submit', submitButtonClicked);

Answer 2

您需要确保data.submit存在且值等于“test”。尝试使用alert / console.log。

编辑：再看看。尝试修改你的代码：

$("form.register").submit(function(e) {
        e.preventDefault();
        $.post("register.php", $("form.register").serialize(), function( data ) {
            if( data.submit == "test" )
                $("p#submit_error").slideDown();
        }, "json");
    });

.submit表单信息与jquery和返回结果，而无需重新加载

2 个答案: