jQuery ajax serialize() 提交表单数据
在jquery中我们ajax提交表单可以直接使用serialize()来转换,这样就把表单名中的input转换成了get方法了,如果我们有大量的参数就不需要填写了。
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, '提示'); } } }); }