jquery拼接ajax 的json和字符串拼接的议程

作者:ca88

将JavaScript的jQuery库中表单转化为JSON对象的格局,jqueryjson

我们驾驭Jquery中有serialize方法,能够将表单体系化为七个“&”连接的字符串,但却从不提供种类化为Json的议程。可是,大家能够写一个插件完结。
 
自身在网络来看有人用替换的方法,先用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对象。
 下边是表单:

 < 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> 

Jquery插件代码如下:  

( 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); 

 
 
上面测验一下:

$("#myForm").bind("submit",function(e){

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

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

测量检验结果:
输入a,b提交,得到连串化结果

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

 
 
地点的插件,无法适用于有七个值的输入控件,举例复选框、多选的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>

我们精晓Jquery中有serialize方法,能够将表单连串化为叁个“nbsp; 笔者在英特网来看有人...

 
 
上边测验一下:

 

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

 < 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> 

 测量试验结果:

如上正是本文的全体内容,希望对大家的上学抱有援助,也愿意我们多多扶助脚本之家。

世家明白Jquery中有serialize方法,可以将表单系列化为叁个“&”连接的字符串,但却从未提供系列化为Json的不二秘技。可是,大家得以写一个插件完毕。
 
作者在网络看看有人用替换的点子,先用serialize体系化后,将&替换来“:”、“‘”:

 

此处,笔者将多选的值封装为多少个数值来实行管理。如若我们使用的时候须要将多选的值封装为“,”连接的字符串可能另外花样,请自行修改相应代码。

Jquery插件代码如下:  

测量检验如下:

<form id="myForm" action="#">
  <input name="name" value="111"/>
  <input name="age" value="2222"/>
  <button type="submit">tijiao</button>
</form>
</body>

<script src="../js/jquery-1.11.0.min.js"></script>
<script>
  var dataId = $("#myForm input").map(function (){
    // return($(this).attr("id"));
    return($(this).attr("name") '=' $(this).val());
  }).get().join("&");
  alert(dataId);
  </script>
/**
* 重置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;  
  }  

 

<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>
<input name="content" value="ddd 567"/>

 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);

个人认为那样做有bug。
 小编的方法是,先用serializeArray序列化为数组,再封装为Json对象。
 上边是表单:

上边的插件,无法适用于有八个值的输入控件,举例复选框、多选的select。上边,小编将插件做进一步的修改,让其协理多选。代码如下:

收拾文书档案,搜刮出贰个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下共享。

< 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> 

 个人认为那样做有bug。

<form id="myForm" action="#">
  <input name="name"/>
  <input name="age"/>
  <input type="submit"/>
</form>
<script src="http://www.ys-gx.com/uploads/allimg/190828/1611305H4-0.jpg"></script>
<script>
  (function($){
    $.fn.serializeJson=function(){
      var serializeObj={};
      $(this.serializeArray()).each(function(){
        serializeObj[this.name]=this.value;
      });
      return serializeObj;
    };

    $('#myForm').bind('submit',function(e){
      console.log($(this).serializeJson())
    })
  })(jQuery)

</script>

此地,小编将多选的值封装为贰个数值来张开管理。假若大家利用的时候须要将多选的值封装为“,"连接的字符串大概别的花样,请自行修改相应代码。
 
测验如下:
表单:ca88,  

  1. /**  
  2.      * 重置form表单  
  3.      * @param formId  form的id   
  4.      */    
  5.     function resetQuery(formId){    
  6.         var fid = "#"   formId;    
  7.         var str = $(fid).serialize();    
  8.         //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04    
  9.         var ob= strToObj(str);    
  10.         alert(ob.startdate);//2012-02-01    
  11.     }    
  12.         
  13.     function strToObj(str){    
  14.         str = str.replace(/&/g,"','");    
  15.         str = str.replace(/=/g,"':'");    
  16.         str = "({'" str  "'})";    
  17.         obj = eval(str);     
  18.         return obj;    
  19.     }    

抑或直接用$(“#表单id”).serialize()间接连串化。。。

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

 

测量检验结果:

本文由ca88发布,转载请注明来源

关键词: ca88网址 Jquery