jQuery ajax serialize() 提交表单数据

转载

mob604756fef1ec 2014-02-12 00:47:00

在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, '提示');
                 }
         }
 });
 }