有人可以教我如何使用jquery來顯示成功的表單提交而不刷新頁面。 類似的情況發生在gmail上,當一個消息被傳遞時,黃色覆蓋圖顯示你的消息已經被傳遞,然後淡出。jquery表單提交
回答
test.php的:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>
<form action='_test.php' method='post' class='ajaxform'>
<input type='text' name='txt' value='Test Text'>
<input type='submit' value='submit'>
</form>
<div id='testDiv'></div>
_test.php:
<?php
// Code here to deal with your form submitted data.
$arr = array('testDiv' => 'Form is successfully submitted.');
echo json_encode($arr);
?>
jsFile.js:
jQuery(document).ready(function(){
jQuery('.ajaxform').submit(function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
dataType: 'json',
data : $(this).serialize(),
success : function(data) {
for(var id in data) {
jQuery('#' + id).html(data[id]);
}
}
});
return false;
});
});
OR:
您可以使用jQuery Form Plugin
上面這段代碼昨天工作正常,但今天發生了奇怪的事情。而不是將** testDiv **的內容與頁面的內容一起添加到test.php中,並在空白頁面中顯示{testdiv =>「deliver」}。 – Ayush 2010-09-21 08:48:18
@Ayush:你昨天的代碼改變了什麼。它顯示JSON數據('{testdiv =>「已傳遞」}「),因爲以下可能的原因:** 1。**可能是您的jQuery函數未被調用,因爲您已經移除了'class ='來自'form'標記的ajaxform'',用於捕獲jQuery代碼中的提交事件。 ** 2。**可能是你改變了'jQuery('.ajaxform')。submit(.....)'中的選擇器('.ajaxform')。 ** 3。**可能是你沒有正確包含jQuery代碼/文件。 – NAVEED 2010-09-21 15:13:44
當我檢查使用Firebug它表明我 - POST http://174.132.194.155/~kunal17/devbuzzr/wp-content/themes/street/sms.php \t 404未找到1.26s \t jquery.min.js (130行)我已經檢查過sms.php的地址是否正確 – Ayush 2010-09-23 09:00:42
- 1. jQuery表單提交
- 2. jquery表單提交
- 3. jQuery提交表單
- 4. jquery表單提交
- 5. jQuery - 表單提交
- 6. JQuery提交表單
- 7. JQuery - 表單提交
- 8. jQuery表單提交
- 9. Jquery表單提交
- 10. jquery load vs ajax提交表單提交
- 11. 禁用jQuery的提交表單提交
- 12. 通過jquery提交表單提交
- 13. JQuery表單提交不提交
- 14. 通過jQuery提交表單提交JSON
- 15. 使用jquery提交表單
- 16. 提交jQuery表單動畫
- 17. jquery陷阱表單提交()
- 18. jquery this.attr(「action」)提交表單?
- 19. 提交表單和jQuery的
- 20. HTML表單提交與jquery
- 21. 用Jquery提交表單
- 22. jQuery提交表單淡出
- 23. 使用jQuery提交表單
- 24. Prestashop表單提交jquery Ajax
- 25. Jquery - 未提交表單
- 26. Jquery提交選定表單
- 27. jquery提交表單一次
- 28. jquery表單提交錯誤
- 29. jquery多選提交表單
- 30. JQuery表單提交問題?
,你甚至嘗試谷歌? – zerkms 2010-09-20 04:28:24
試試這個http://jquery.malsup.com/form/。這是我以前在我的項目中使用的 – svk 2010-09-20 04:30:51
有趣的zerkms ...我google了很多,但沒有找到我正在尋找的4r – Ayush 2010-09-20 04:32:14