Jquery serialization Form

As you know, jquery has a serialize method that serializes a form into a "&" concatenated string, but does not provide a way to serialize to JSON. However, we can write a plugin implementation.

I saw on the internet that someone replaced the & with a ":", "'" after serialization with Serialize:

1 /** 2 * Reset Form form3 * @param the ID of the FormId form4      */  5     functionResetquery (formId) {6         varFID = "#" +formId; 7         varstr =$ (FID). Serialize (); 8         //str= cardselectdate=3&startdate=2012-02-01&enddate=2012-02-049         varob=strtoobj (str); Tenalert (ob.startdate);//2012-02-01 One     }   A        -     functionstrtoobj (str) { -str = str.replace (/&/g, "', '");  thestr = str.replace (/=/g, "': '"));  -str = "({'" "+str +"}) ";  -obj =eval (str);  -         returnobj;  +}

Personally feel that doing so has bugs.

My approach is to serialize the Serializearray to an array and then encapsulate it as a JSON object.

Here is the form:

1 <formID= "MyForm"Action="#">2     <inputname= "Name"/>3     <inputname= "Age"/>4     <inputtype= "Submit"/>5 </form>

The jquery plugin code is as follows:

1(function($){2$.fn.serializejson=function(){3             varserializeobj={};4$( This. Serializearray ()). each (function(){5serializeobj[ This. name]= This. Value;6             });7             returnserializeobj;8         };9}) (JQuery);

Test it below:

1 $ ("#myForm"). Bind ("Submit",function(e) {2        e.preventdefault (); 3         Console.log ($ (this). Serializejson ()); 4     });

Test results:

Input A, B commit, get serialization results

{age: ' B ', Name: ' A '}

The above plug-in cannot be applied to input controls that have multiple values, such as check boxes, select multiple selections. Next, I'll make further changes to the plugin to support multiple selections. The code is as follows:

1(function($){2$.fn.serializejson=function(){3             varserializeobj={};4             vararray= This. Serializearray ();5             varStr= This. Serialize ();6$ (array). each (function(){7                 if(serializeobj[ This. Name]) {8                     if($.isarray (serializeobj[ This. Name])) {9serializeobj[ This. Name].push ( This. value);Ten}Else{ Oneserializeobj[ This. name]=[serializeobj[ This. Name], This. value]; A                     } -}Else{ -serializeobj[ This. name]= This. Value;  the                 } -             }); -             returnserializeobj; -         }; +}) (JQuery);

Here, I encapsulate the multiple-selection values as a numeric value for processing. If you need to encapsulate the multiple-choice values as "," concatenated strings, or other forms of use, modify the corresponding code yourself.

The test is as follows:

Form:

1 <formID= "MyForm"Action="#">2     <inputname= "Name"/>3     <inputname= "Age"/>4     <Selectmultiple= "multiple"name= "Interest"size= "2">5         <optionvalue= "Interest1">Interest1</option>6         <optionvalue= "Interest2">Interest2</option>7         <optionvalue= "Interest3">Interest3</option>8         <optionvalue= "Interest4">Interest4</option>9     </Select>Ten     <inputtype= "checkbox"name= "Vehicle"value= "Bike" />I have a bike One     <inputtype= "checkbox"name= "Vehicle"value= "Car" />I have a car A     <inputtype= "Submit"/> - </form>

Test results:

{Age: "AA", Interest: ["Interest2", "Interest4"],name: "DD", vehicle:["Bike", "Car"]}

This article was reproduced in: http://my249645546.iteye.com/blog/1617872