iT邦幫忙

0

jquery接收ajax訊息並反應於前端

各位好:

請問以下的程式碼部份,是按下id名為btn的按鈕後,觸發ajax動作,
那請問該如何再將data: 區塊的部份 jquery化?不然若html表單有100個欄位,不就要填入100個.val()資料....

JQUERY部份:

		$('#btn').click(function (){
			$.ajax({         
				url: 'ajax_output.php',
				cache: false,
				dataType: 'html',
					type:'GET',
				data: {
//要 ''jquery''化的地方,可以在去蕪存菁的方式抓出欄位嗎?而不用日後若是有擴充表單欄位,則要一筆一筆手動列入欄位資訊.
					name: $('#name').val(),
					sex: $('#sex').val(),
					username: $('#username').val()
				},
				error: function(xhr) {
					alert('Ajax request 發生錯誤');
				},
				success: function(response) {
					$('#send_data').html(response);
				}
			});
		}); 

HTML表單部份

<div id="send_data">
<input type="text" id="name"> <br>
<input type="text" id="sex"> <br>
<input type="text" id="username"> <br>
↑目前有3個欄位,所以js程式碼中的data:區塊要放入3筆要送出的~
<input type="button" value="send" id="btn">

<div id="msg">loading...</div> </div>
</div>
</div>
看更多先前的討論...收起先前的討論...
ccutmis iT邦研究生 5 級 ‧ 2012-04-19 17:56:09 檢舉
不就是這個嗎?XD
http://api.jquery.com/serialize/
isthome iT邦新手 4 級 ‧ 2012-04-19 19:43:08 檢舉
不行耶~
取不到值?


<script type="text/javascript">
$(document).ready(function () {

  //$('#btn').click(function (){
  $("#input_form").submit(function(){ 

  var querystring = $(this).serialize(); 
  alert(querystring);

  $.ajax({         
	url: 'ajax_output.php',         
	cache: false,         
	dataType: 'html',             
	type:'GET',         
	//data: { 
	//	name: $('#name').val(),
	//	sex: $('#sex').val()
	//},  
	data: querystring
   });
}); 
</script>



<form id="input_form" action="#" >
<input type="text" id="name"> <br>
<input type="text" id="sex"> <br>
<input type="text" id="username"> <br>
<input type="submit" value="send" name="submit" />
</form>
ccutmis iT邦研究生 5 級 ‧ 2012-04-19 21:49:21 檢舉
試試這個...
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	$("#mySubmitButton").click(function(event){
		event.preventDefault();
		var tmpStr1 = $("#myForm").serialize();
		alert('serialize處理完成:\n\n'+tmpStr1);
		var tmpStr2=decodeURIComponent($("#myForm").serialize());
		alert('serialize&&decodeURIComponent處理完成:\n\n'+tmpStr2);
		//$.post("nextstep.php", { formdata: tmpStr2 }, function(data) { alert(data); });
	});
}); 
</script>
</head>
<body>
<form id='myForm'>
	A:<input type="text" name="name" value="王小明" /><br /> 
	B:<input type="text" name="sex" value="男" /><br /> 
	C:<input type="text" name="username" value="ithome" /><br /> 
	<button id='mySubmitButton'>確定送出</button>
</form>
</body>
</html>

參考網址:
http://stackoverflow.com/questions/920294/jquery-serialize-and-
ccutmis iT邦研究生 5 級 ‧ 2012-04-19 21:54:59 檢舉
用serialize()時要注意到表單元素裡面要有name屬性,您先前測試的只有id,自然抓不到值。另外建議您養成well formed的習慣,例如 <input ... > 改成 <input ... /> 及 <br> 改成 <br /> 會比較好。

2 個回答

8
simon88
iT邦研究生 3 級 ‧ 2012-04-20 09:48:27
最佳解答
&lt;pre class="c" name="code">$(form的id).serialize();   // 這樣子就可以了,記得form裡面的所有欄位要加上name
godstamp iT邦新手 3 級 ‧ 2012-04-20 23:48:07 檢舉

這個方法好,而且效能較佳!!

4
mjj2000
iT邦新手 5 級 ‧ 2012-04-19 18:21:11

如果input type都是text,且用id當做name:

&lt;pre class="c" name="code">
var data = {};
$.each($('#send_data input[type=text]'), function () {    
  data[this.id] = this.value;
});

我要發表回答

立即登入回答