jQuery ajax serialize() 提交表单数据

时间：2013-07-24 编辑：简简单单来源：一聚教程网

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()序列化表单实例：

代码如下

复制代码

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('60秒后重新获取');
$('#timeb1').click(function(){});
timer = self.setInterval(addsec,1000);

}

html页面

代码如下

复制代码

可能碰到的问题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, '提示');
                }
        }
});
}

上一个： js print打印网页指定区域内容
下一个： JavaScript XML省市县三级联动下拉菜单

推荐专题

最新下载

热门教程

jQuery ajax serialize() 提交表单数据

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程