jQuery ajax中資料以索引值對（Key/Value）的形式發送到伺服器，使用ajax提交表單資料時可以使用jQuery ajax的serialize() 方法表單序列化為索引值對（key1=value1&key2=value2…）後提交。serialize() 方法使用標準的 URL-encoded 編碼錶示文本字串。下面是使用serialize()序列化表單的執行個體：
jQuery ajax原型：
| 代碼如下 |
複製代碼 |
$.ajax({
type: "POST",
url: ajaxCallUrl,
data: "Key=Value&Key2=Value2",
success: function(msg){alert(msg);}
}); |
ajax serialize():
| 代碼如下 |
複製代碼 |
$.ajax({
type: "POST",
url:ajaxCallUrl,
data:$('#formID').serialize(),// 要提交的表單
success: function(msg) {alert(msg);}
}); |
serialize()序列化表單一實例：
| 代碼如下 |
複製代碼 |
<script type="text/javascript" src="/demo/jquery/jquery-1.7.2.min.js"
></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
alert($("#myForm").serialize());
});
});
</script>
<form id="myForm">
姓名 <input value="liming" name="Name" /><br />
職位 <input value="CEO" name="position" /><br />
<input id="button" value="序列化表單" type="button" />
</form> |
ajax serialize執行個體
| 代碼如下 |
複製代碼 |
var timer;
//驗證手機號
function getVerify(){
if($('#regRuser').val()){
var m=$('#regRuser').val();
if(/^13d{9}$/g.test(m)||(/^15[0-35-9]d{8}$/g.test(m))|| (/^18d{9}$/g.test(m))){
var postData = $('#reg_form').serialize();
$.ajax({
type: "POST",
url: "/ajax/getVerify",
data: postData,
success: function(msg){
if(msg>0){
alert('驗證碼已發送至您手機，請注意查收');
$('#getVerify').hide();
$('.regnav').css('background','url(/static/images/v10/regnav2.png)');
$('#checkvalidate').show();
f_timeout();
$('.abc').show();
}else if(msg==-1){
alert('一分鐘內只能收取一次驗證碼');
}
}
});
}else{
alert('請輸入正確的手機號');
}
}
} function f_timeout(){
$('#timeb1').html('<span id="timeb2">60</span>秒後重新擷取');
$('#timeb1').click(function(){});
timer = self.setInterval(addsec,1000); } function addsec(){
var t = $('#timeb2').html();
//alert(t);
if(t > 0){
$('#timeb2').html(t-1);
//alert(t);
}else{
window.clearInterval(timer);
$('#timeb1').html('<span id="timeb2"></span>重新擷取驗證碼');
$('#timeb1').click(function(){getVerify();});
}
} |
html頁面
| 代碼如下 |
複製代碼 |
<form id="reg_form" name="reg_form" method="post" onsubmit="return false;">
<input value="" name="regCyqnumber" type="hidden" id="regCyqnumber">
<ul>
<li><span class="txt_name">手機號碼：</span><input class="input_user" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" name="regRuser" type="text" id="regRuser"></li>
<li><span class="txt_name">手機驗證碼：</span><span class="code" onclick="getVerify();" id="timeb1" style="cursor:pointer">免費擷取驗證碼</span><input class="input_code" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" type="text" name="verifyCode" id="verifyCode" ></li>
<li><span class="txt_name">登入密碼：</span><input class="input_user" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" id="regRpass" name="regRpass" type="password"></li>
<!--<li>
<span class="txt_name">驗證碼：</span>
<div class="yz_code">
<span class="code1" style="cursor:pointer"> <img src="/static/scode.php" title='換一個驗證碼試試' onclick="this.src='/static/scode.php?id='+Math.random()" /></span>
<input class="input_yzcode" autocomplete="off" onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='') this.value='';" value="" type="text" name="scode" id="scode" >
</div></li>-->
<li class="reg">
<input type="hidden" value="1" name="regCityiD">
<button type="submit" title="註冊" class="button_login_index">註冊</button>
</li>
<li class="regs"><span class="hwlogin">您登入，<a href="/reg/login" target="_blank">點擊登入</a>，<a href="/reg">完整註冊</a></span></li>
</ul>
</form>
|
可能碰到的問題JQuery Ajax提交表單資料時的問題
表單中如果提交的資料量比較大的情況，在IE瀏覽器下會提示“未知名稱”資料提交不了，
一開始以為是加了data : $("#myformId").serialize(),這個的問題，檢查了表單中提交的文本都是否有name屬性；
後來在FireFox下不再報錯，但IE下仍報“未知名稱”的問題，於是懷疑是資料量過大，應該採用POST方式提交，所以在下面加上type: "POST", 這句就可以了。。
所以在做JQUERY ajax提交表單資料的時候一定要注意：
1.表單的文字框等要有name屬性，並與後台接收的對應
2.注意提交的方式
代碼如
| 代碼如下 |
複製代碼 |
function toSaveOutList(){
$.ajax({
url: "InOrderAction!saveOutPickInOrder.action", //提交的action
data : $("#myformId").serialize(),// 從表單中擷取資料 dataType: "json", //返回json格式的資料 type: "POST", // 佈建要求類型為"POST"，預設為"GET"
error: function(request) { // 設定表單提交出錯
jAlert('warning', "提交出錯，請稍候再試", '提示');
},
success: function(json) { // 設定提交完成使用方法
if(json[0].result=='success' && json[0].errorMessage==null){
jAlert('warning', '提交成功', '提示', function(r){
if(r)
location.href="InOrderAction!toOutPickInOrder.action";
});
}else{
jAlert('warning', json[0].errorMessage, '提示');
}
}
});
} |
