>

必发88官网jQuery系列化后的表单值调换来Json

- 编辑:www.bifa688.com -

必发88官网jQuery系列化后的表单值调换来Json

jQuery种类化后的表单值转换来Json,jqueryjson

小伙子有贰个表单,他想以Json的格局获得到表单的内容。小家伙尝试了以下方法。

通过$("#form").serialize()能够拿走到种类化的表单值字符串。

例如:

a=1&b=2&c=3&d=4&e=5

通过$("#form").serializeArray()出口以数组格局种类化表单值。

[ 
 {name: 'firstname', value: 'Hello'}, 
 {name: 'lastname', value: 'World'},
 {name: 'alias'}, // 值为空
]

统统不满足小孩子想获取Json的愿望。堆栈溢出后,找到了七个如此的格局

$.fn.serializeObject = function()
{
 var o = {};
 var a = this.serializeArray();
 $.each(a, function() {
 if (o[this.name] !== undefined) {
  if (!o[this.name].push) {
  o[this.name] = [o[this.name]];
  }
  o[this.name].push(this.value || '');
 } else {
  o[this.name] = this.value || '';
 }
 });
 return o;
};

接下来通过$("#form").serializeObject();就足以得到Json内容噜。

以上所述是小编给大家介绍的jQuery类别化后的表单值转变到Json,希望对我们有着帮助,要是大家有别的疑问请给自家留言,作者会及时还原大家的。在此也特别多谢我们对帮客之家网址的协理!

小家伙有二个表单,他想以Json的法门赢获得表单的剧情。小家伙尝试了以下方法。 通过 $("#fo...

孩子有多少个表单,他想以Json的方式赢获得表单的内容。小家伙尝试了以下办法。

世家精通Jquery中有serialize方法,能够将表单类别化为五个“&”连接的字符串,但却从未提供体系化为Json的章程。但是,大家得以写多少个插件实现。
 
自己在网络看看有人用替换的方法,先用serialize类别化后,将&替换到“:”、“‘”:

通过$("#form").serialize()能够博获得连串化的表单值字符串。

/**
* 重置form表单
* @param formId form的id
*/
function resetQuery(formId){
var fid = "#"   formId;
var str = $(fid).serialize();
//str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04
var ob= strToObj(str);
alert(ob.startdate); //2012-02-01
}
function strToObj(str){
str = str.replace(/&/g, "','" );
str = str.replace(/=/g, "':'" );
str = "({'"  str   "'})" ;
obj = eval(str);
return obj;
}

/** 
   * 重置form表单 
   * @param formId form的id  
   */  
  function resetQuery(formId){  
    var fid = "#"   formId;  
    var str = $(fid).serialize();  
    //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04  
    var ob= strToObj(str);  
    alert(ob.startdate);//2012-02-01  
  }  

  function strToObj(str){  
    str = str.replace(/&/g,"','");  
    str = str.replace(/=/g,"':'");  
    str = "({'" str  "'})";  
    obj = eval(str);   
    return obj;  
  }  

例如:

个人感到那样做有bug。
 作者的艺术是,先用serializeArray体系化为数组,再封装为Json对象。
 上边是表单:

a=1&b=2&c=3&d=4&e=5
 < form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< input type = "submit" />
</ form >

<form id="myForm" action="#"> 
  <input name="name"/> 
  <input name="age"/> 
  <input type="submit"/> 
</form> 

通过$("#form").serializeArray()输出以数组情势体系化表单值。

Jquery插件代码如下:  

[ 
 {name: 'firstname', value: 'Hello'}, 
 {name: 'lastname', value: 'World'},
 {name: 'alias'}, // 值为空
]
( function ($){
$.fn.serializeJson= function (){
var serializeObj={};
$( this .serializeArray()).each( function (){
serializeObj[ this .name]= this .value;
});
return serializeObj;
};
})(jQuery);

(function($){ 
    $.fn.serializeJson=function(){ 
      var serializeObj={}; 
      $(this.serializeArray()).each(function(){ 
        serializeObj[this.name]=this.value; 
      }); 
      return serializeObj; 
    }; 
  })(jQuery); 

清一色不满意孩子想博得Json的意愿。客栈溢出后,找到了八个这么的艺术

必发88官网, 
 
上边测验一下:

$.fn.serializeObject = function()
{
 var o = {};
 var a = this.serializeArray();
 $.each(a, function() {
 if (o[this.name] !== undefined) {
  if (!o[this.name].push) {
  o[this.name] = [o[this.name]];
  }
  o[this.name].push(this.value || '');
 } else {
  o[this.name] = this.value || '';
 }
 });
 return o;
};
$("#myForm").bind("submit",function(e){

e.preventDefault();
console.log($( this ).serializeJson());
});

  e.preventDefault(); 
  console.log($(this).serializeJson()); 
}); 

然后经过$("#form").serializeObject();就能够猎取Json内容噜。

测验结果:
输入a,b提交,获得体系化结果

上述所述是小编给我们介绍的jQuery系列化后的表单值调换来Json,希望对我们有所接济,假如大家有任何疑问请给本身留言,作者会及时苏醒大家的。在此也极其谢谢我们对剧本之家网址的支撑!

{age: "b",name: "a"}

你大概感兴趣的篇章:

  • jQuery达成form表单元素系列化为json对象的不二诀窍
  • jquery系列化form表单使用ajax提交后管理回来的json数据
  • 深究JQUE奇骏Y JSON的反类别化类 using难点的消除方法
  • 据书上说jQuery的贰个扩充form系列化到json对象
  • Jquery 组合form成分为json格式,asp.net反系列化

 
 
地点的插件,不可能适用于有多少个值的输入控件,比如复选框、多选的select。上面,作者将插件做进一步的改变,让其援助多选。代码如下:  

( function ($){
$.fn.serializeJson= function (){
var serializeObj={};
var array= this .serializeArray();
var str= this .serialize();
$(array).each( function (){
if (serializeObj[ this .name]){
if ($.isArray(serializeObj[ this .name])){
serializeObj[ this .name].push( this .value);
} else {
serializeObj[ this .name]=[serializeObj[ this .name], this .value];
}
} else {
serializeObj[ this .name]= this .value;
}
});
return serializeObj;
};
})(jQuery);

(function($){ 
    $.fn.serializeJson=function(){ 
      var serializeObj={}; 
      var array=this.serializeArray(); 
      var str=this.serialize(); 
      $(array).each(function(){ 
        if(serializeObj[this.name]){ 
          if($.isArray(serializeObj[this.name])){ 
            serializeObj[this.name].push(this.value); 
          }else{ 
            serializeObj[this.name]=[serializeObj[this.name],this.value]; 
          } 
        }else{ 
          serializeObj[this.name]=this.value;  
        } 
      }); 
      return serializeObj; 
    }; 
  })(jQuery); 

此处,作者将多选的值封装为二个数值来进行管理。如若大家利用的时候须要将多选的值封装为“,"连接的字符串恐怕其余花样,请自行修改相应代码。
 
测量检验如下:
表单:  

< form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< select multiple = "multiple" name = "interest" size = "2" >
< option value = "interest1" > interest1 </ option >
< option value = "interest2" > interest2 </ option >
< option value = "interest3" > interest3 </ option >
< option value = "interest4" > interest4 </ option >
</ select >
< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike
< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car
< input type = "submit" />
</ form >

<form id="myForm" action="#"> 
  <input name="name"/> 
  <input name="age"/> 
  <select multiple="multiple" name="interest" size="2"> 
    <option value ="interest1">interest1</option> 
    <option value ="interest2">interest2</option> 
    <option value="interest3">interest3</option> 
    <option value="interest4">interest4</option> 
  </select> 
  <input type="checkbox" name="vehicle" value="Bike" /> I have a bike 
  <input type="checkbox" name="vehicle" value="Car" /> I have a car 
  <input type="submit"/> 
</form> 

测量试验结果:

{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}

管理系列化时的空格难点

jquery的 serialize()方法,能够对表单项进行体系化,那当然是很有利的一个作用;可是事实上应用中有的时候候会现身如下难点:

例如

<input name="content" value="ddd 567"/>

在推行 serialize()方法后,获得的却是  ddd 567这样的字符串;即jquery的体系化方法对空格进行了转义,转变到了 号。

缓和情势

出于serialize()方法对实在的“ ”号转义的是 %2B,所以能够对serialize()后的结果实行标识替换。

例如

<input name="content" value="ddd   567   987"/>

<script>

var a= $('$frm1').serialize(); //序列化,默认会调用encodeURIComponent()进行编码
alert(a); // content=ddd   567   987
var b = a.replace(/\ /g," ");  // g表示对整个字符串中符合条件的都进行替换
b = decodeURIComponent(b); //对serialize后的内容进行解码
alert(b); // content=ddd   567   987

</script>

您可能感兴趣的稿子:

  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • jQuery实现form表单成分体系化为json对象的办法
  • jquery自动将form表单封装成json的具体贯彻
  • jquery体系化form表单使用ajax提交后甩卖回来的json数据
  • jQuery把表单成分变为json对象
  • javascript表单域与json数据间的相互
  • JS获取二个表单字段中多条数据并转账为json格式

本文由必发88官网发布,转载请注明来源:必发88官网jQuery系列化后的表单值调换来Json