Serialization of complex form forms serialize-object.js

<formclass= "form-horizontal"role= "form"ID= "myform"Action=""Method= "post">   <Divclass= "form-group">     <label for= "email"class= "col-sm-2 control-label">Email</label>     <Divclass= "col-sm-10">       <inputtype= "email"class= "form-control"ID= "email"name= "user[email]"placeholder= "Email"value= "[email protected]">     </Div>   </Div>   <Divclass= "form-group">     <label for= "inputPassword3"class= "col-sm-2 control-label">Skills</label>     <Divclass= "col-sm-10">         <labelclass= "checkbox-inline">           <inputtype= "checkbox"name= "user[skill][]"value= "html5">HTML5</label>         <labelclass= "checkbox-inline">           <inputtype= "checkbox"name= "user[skill][]"value= "javascript"checked>Javascript</label>         <labelclass= "checkbox-inline">           <inputtype= "checkbox"name= "user[skill][]"value= "PHP"checked>PHP</label>         <labelclass= "checkbox-inline">           <inputtype= "checkbox"name= "user[skill][]"value= "Python">Python</label>         <labelclass= "checkbox-inline">           <inputtype= "checkbox"name= "user[skill][]"value= "MySQL"checked>MySQL</label>         <labelclass= "checkbox-inline">           <inputtype= "checkbox"name= "user[skill][]"value= "Redis">Redis</label>     </Div>   </Div>   <Divclass= "form-group">     <label for= "email"class= "col-sm-2 control-label">Monthly salary</label>     <Divclass= "col-sm-10">         <Selectclass= "form-control"name= "user[salary]">           <optionvalue= "the">5000 or less</option>           <optionvalue= "5000-10000">5000-10000</option>           <optionvalue= "10000-20000">10000-20000</option>           <optionvalue= "20000">20000 or more</option>         </Select>     </Div>   </Div>   <Divclass= "form-group">     <label for= "email"class= "col-sm-2 control-label">Self-evaluation</label>     <Divclass= "col-sm-10">         <textareaclass= "form-control"name= "user[intro]"rows= "3"></textarea>     </Div>   </Div>      <Divclass= "form-group">     <Divclass= "col-sm-offset-2 col-sm-10">       <Buttontype= "submit"class= "btn btn-default"ID= "subbtn">Submit</Button>     </Div>   </Div>

First load the jquery library and jquery.serialize-object.js, the two JS files in my packaged source code, where jquery is the reference CDN Resource.

<src= "http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></  script><src= "js/ Jquery.serialize-object.min.js "></script>

$ (function() {     $ (document). on (function(event) {         event.preventdefault ();                   var json_data = $ (' #myform '). serializejson ();         $.post (function(data) {             console.log (data);         }      );});

In the code above, we only need to use the $(‘#myform‘).serializeJSON() data for all fields of the entire form and serialize it in JSON format, when the post data becomes the following format:

{"user": {"email": "[email protected]", "skill": ["html5", "javascript", "PHP", "MySQL"], "salary": "the", "intro": "caesar's" r\n Days 654\r\n Third party "}}

Get a json-formatted data that looks like it's not Cool.

Of course Jquery.serialize-object.js also provides a way to serialize objects: serializeobject, you can get a JavaScript object object using the following code:

var obj_data = $ (' #myform '). serializeobject ();

After PHP receives the post data, it can be transferred to a group to manipulate the array Well.

For more information on the serialization of form data, refer to jquery Serialize object Project GitHub address: Https://github.com/macek/jquery-serialize-object

Technical Exchange QQ Group: 15129679

Serialization of complex form forms serialize-object.js