1

我是 Ajax 的初学者，并试图用 jquery 构建一个简单的 ajax 示例。出于某种原因，如果我将提交按钮放在表单标签中，我的 $.post 将不起作用。这是我的 creat_user.php：

<?php
$user_login = $_REQUEST['login_name'];
echo $user_login;
?>

这是我的html：

<form id='create_user_form'>
    <p><label>Login Name : </label><input type='text' name = 'login_name'></p>
    <p><label>Password : </label><input type='password' name='login_pw'></p>
    <p><label>Re-Enter Password : </label><input type='password' name='login_pw2'></p>
    <p><label>Email : </label><input type='email' name='email'></label></p>
    <p><label>Date of Birth : </label><input type='date' name='date'></p>
    <p><input type='submit' name='submit' id='create' value='create'></p>  
</form>

和jQuery：

$(document).ready(function(){
    $("#create_user_form").submit(function(){
        var serialize = $(this).serialize();
        alert('Here');
        $.post("create_user.php",serialize,function(response){
            alert('Here2');
            alert(response);
            console.log("Response: "+response);
       });
   });
});

出于某种原因，alert('Here2') 永远不会被触发，但是如果我将提交按钮从表单标记中移出，它将起作用。（我确实更改了 jquery 代码中的选择器并将 submit() 更改为单击()):

<form id='create_user_form'>
    <p><label>Login Name : </label><input type='text' name = 'login_name'></p>
    <p><label>Password : </label><input type='password' name='login_pw'></p>
    <p><label>Re-Enter Password : </label><input type='password' name='login_pw2'></p>
    <p><label>Email : </label><input type='email' name='email'></label></p>
    <p><label>Date of Birth : </label><input type='date' name='date'></p>         
</form>
    <p><input type='submit' name='submit' id='create' value='create'></p>

那么，如果我将提交按钮放入表单标签中，我的代码是否有任何问题导致 .post() 不起作用？

4

3 回答 3

3

也许你需要添加

 return false;

在提交事件中？

于 2013-06-12T08:54:09.333 回答
2

您丢失return false或preventDefault()在提交处理程序中：

$("#create_user_form").submit(function(){
    ...
    return false;
});

或者

$("#create_user_form").submit(function(e){
    e.preventDefault();
    ...
});

这将阻止浏览器在发送 ajax 请求后提交表单。

于 2013-06-12T08:54:56.237 回答
0

默认表单提交发生在Ajax调用返回之前。您应该阻止表单的默认操作。

$(document).ready(function(){
    $("#create_user_form").submit(function(e){
        e.preventDefault(); //do not submit the form.
        var serialize = $(this).serialize();
        alert('Here');
        $.post("create_user.php",serialize,function(response){
            alert('Here2');
            alert(response);
            console.log("Response: "+response);
       });
   });
});
于 2013-06-12T08:55:16.997 回答