代码之家 › 专栏 › 技术社区 › ganjan

.使用jquery提交表单信息并返回结果而不重新加载

submit post forms ajax jquery

0

ganjan · 技术社区 · 15 年前

查询:

<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表单中单击submit时,我会将所有值提交到register.php,并用 "test" . 我的jquery javasript然后执行:

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

这应该可以滑出这个信息

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

但是当我点击提交的时候什么都没有发生。。

2 回复 | 直到 15 年前

1

PleaseStand 15 年前

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);

2

0

meder omuraliev 15 年前

你要确定 data.submit 存在和价值等于“测试”。尝试使用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");
    });