Question

我是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);
       });
   });
});

出于某种原因，警告（'Here2'）永远不会被触发，但是如果我从表单标签中移出提交按钮它会起作用。它确实有效。（我确实在jquery代码中更改了选择器并更改了提交（）点击（））：

<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（）不起作用吗？

Answer 1

也许你需要添加

 return false;

在提交活动中？

Answer 2

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

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

或者

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

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

Answer 3

默认表单提交是在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);
       });
   });
});

jquery帖子没有使用HTML表单

3 个答案: