各位好：
請問以下的程式碼部份，是按下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>
已邀請的邦友 {{ invite_list.length }}/5
<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>
<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>
<pre class="c" name="code">$(form的id).serialize(); // 這樣子就可以了，記得form裡面的所有欄位要加上name
如果input type都是text，且用id當做name:
<pre class="c" name="code">
var data = {};
$.each($('#send_data input[type=text]'), function () {
data[this.id] = this.value;
});
iThome鐵人賽
看影片追技術