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:
- /**
- * reset Form form
- * @param the ID of the FormId form
- */
- 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;
- }
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:
- <form id= "myForm" action="#">
- <input name="name"/>
- <input name="Age"/>
- <input type="Submit"/>
- </form>
The jquery plugin code is as follows:
- (function($) {
- $.fn.serializejson=function() {
- var serializeobj={};
- $ (this. Serializearray ()). each (function() {
- serializeobj[the. name]=this. value;
- });
- return serializeobj;
- };
- }) (JQuery);
Here's a test: $ ("#myForm"). Bind ("Submit", function (e) {
- E.preventdefault ();
- Console.log ($ (this). Serializejson ());
- });
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:
- (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[the. Name].push (this. value);
- }Else{
- serializeobj[this. name]=[serializeobj[the. Name],this. value];
- }
- }Else{
- serializeobj[the. name]=this. value;
- }
- });
- return serializeobj;
- };
- }) (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:
- <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</< /c15>option>
- <option value="Interest4">interest4</ Option>
- </Select>
- < input type = name = "vehicle" value = "Bike" /> i have a bike
- <input type="checkbox" name="vehicle" value ="Car" /> I have a Car
- <input type="Submit"/>
- </form>
Test results:
{Age: "AA", Interest: ["Interest2", "Interest4"],name: "DD", vehicle:["Bike", "Car"]}
Jquery serializes a form into a JSON object