jquery post不能使用HTML表單

我是Ajax的初學者，試圖用jquery構建一個簡單的ajax示例。由於某種原因，如果我將表單標籤中的提交按鈕放入，我的$ .post不起作用。這裏是我的creat_user.php：jquery post不能使用HTML表單

<?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代碼中的選擇器，並將submit（）更改爲click（））：

<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（）不工作，如果我把提交按鈕放到表單標記？

來源

2013-06-12 user1787096

頁面是否刷新？ – Will

你在提交處理程序缺失return false或preventDefault()：

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

或者

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

這將防止瀏覽器提交表單Ajax請求發出後。

來源

2013-06-12 08:54:56 MrCode

明白了。謝謝！ :) – user1787096

@ user1787096如果您的問題解決了，請考慮接受其中一個答案。請參閱http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – MrCode

也許你需要添加

return false;

在提交的事件嗎？

來源

2013-06-12 08:54:09 jQuery00

默認表單提交發生在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-12 08:55:16

jquery post不能使用HTML表單

回答

相關問題