使用Jquery提交表單
[英]Form submission using Jquery
問題描述
我正在使用類似jQuery + JSON的組合：
test.php：
<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;
});
});
現在我想要的是，當提交成功的表單時，如果沒有任何頁面刷新，則應該在div testDiv下顯示一條消息。 我希望這個腳本會有所幫助，但是當提交表單時，頁面會轉到... / _ test.php並顯示以下內容-
{"testDiv":"Form is successfully submitted."}
請幫忙。謝謝先進
4 個解決方案
解決方案1
0 2010-09-21 13:17:20
只是我還是這個腳本對其他人有用？ 我擁有上述的三個文件，並在test.php文件的頭部添加了普通的doctype和jquery核心，並且獲得了成功消息，而沒有任何頁面重定向。
解決方案2
0 2010-09-22 17:45:47
我想我可能已經知道，或者至少我也有相同的症狀。
您需要檢查並確保在jsFile.js腳本標記之前的腳本標記中加載了jquery文件。
壞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jsFile.js"></script>
<script type="text/javascript" src="../../_api/jquery-1.4.2.js"></script>
</head>
<body>
<form action='_test.php' method='post' class='ajaxform'>
<label>
<input type='text' name='txt' value='Test Text'>
</label>
<input type='submit' value='submit'>
</form>
<div id='testDiv'></div>
</body>
</html>
好
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="../../_api/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>
</head>
<body>
<form action='_test.php' method='post' class='ajaxform'>
<label>
<input type='text' name='txt' value='Test Text'>
</label>
<input type='submit' value='submit'>
</form>
<div id='testDiv'></div>
</body>
</html>
解決方案3
-1 2010-09-21 13:03:45
您的JSON字符串有點錯誤，您將需要返回它：
{"id":"testDiv","message":"Form is successfully submitted."}
然后在響應中：
for(var id in data) {
jQuery('#' + data.id).html( data.message );
}
解決方案4
-2 2010-09-21 13:02:16
為什么不只有帶有單擊事件的普通按鈕而不是提交按鈕呢？
使用Ajax / Jquery進行表單提交
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.