Data parameter type for Jquery.ajax ()

If there is a form now, it is added with the element.

<form id= ' addform ' action= ' useradd.action ' type= ' post ' >     <label for= ' uname ' > user name </label>:< Input type= ' text ' name= ' uname ' id= ' uname ' ><br>     <label for= ' mobileipt ' > mobile phone number:</label>< Input type= ' text ' name= ' mobileipt ' id= ' mobileipt ' ><br>     <label for= ' birthday ' > Birthday:</label> <input type= ' text ' name= ' birthday ' ><br>     <input type= ' button ' value= ' Submit ' onclick= ' AddUser () ' > </form>

We don't want to add this element using the form submit, we want to use AJAX submissions.

We used to achieve this:

123456789101112131415161718192021

function addUser(){        varuser = {            uname:$("#uname").val(),            mobileIpt:$("#mobileIpt").val(),            birthday:$("#birthday").val()        };        $.ajax({            url:‘UserAdd.action‘,            data:user,            type:‘post‘,            dataType:‘text‘,            success:function(msg){                if(msg==‘1‘){                    console.log(‘添加成功‘);                }else{                    console.log(‘添加失败‘)                }            }                    })    }

There is nothing wrong with getting the value of the form element is too troublesome .... There are only three items, and many items are wasted ....

Until one day, I discovered the Serializearray method of jquery.

The serialized Table element (similar to the '. Serialize () ' method) returns the JSON data structure. Note that this method returns a JSON object rather than a JSON string. You need to use a plug-in or a third-party library for string manipulation. The returned JSON object consists of an array of objects, each of which contains one or two name-value pairs of the--name parameter and the value parameter if value is not empty.

Let's try it.

$ (' #addForm '). Serializearray ();//Returns the data structure, which is a JSON array, each pair of the image name and value as key, representing the form element name and value[    {"name": "Uname", "Value": ""},    {"name": "Mobileipt", "Value": ""},       {"name": "Birthday", "Value": ""}]

This doesn't seem to work.

We use the Jquery.param () method to process:

var arr = $ (' #addForm '). Serializearray (); $.param (arr); " Uname=alice&mobileipt=110&birthday=1983-05-12 "

Hey, it fits our needs, not JSON type, but at least it can be uploaded as data.

Here we can just fill in the JSON array directly in the data of Ajax, and call $.param () processing within jquery itself.

Let's take a look at the description of the Jquery.param () method:

return value: Stringjquery.param (Obj,[traditional]) serializes the number of table cells or objects. The parameter obj,[traditional] array or jquery object is serialized according to the Name/value pair, and the normal object is serialized according to the Key/value pair. Traditional: Whether to use the traditional method of shallow serialization. Demo:$.param ({uanme: ' Vic ', Mobileipt: ' A ', ' Birthday: ' 2013-11-11 '}); " Uanme=vic&mobileipt=110&birthday=2013-11-11 "

Look at the explanation, seems to have nothing to do with us ah, we change a JSON array to see

$.param ([{uanme: ' Vic '},{mobileipt: '},{birthday: ' 2013-11-11 '}]); " Undefined=&undefined=&undefined= "

The conversion is unsuccessful, why is the data of our form successfully converted to URL parameters? Let's look at the jquery source.

In the Ajax () method, the JSON-type data is $.param () processed if (S.data && s.processdata && typeof s.data!== "string") {    s . data = Jquery.param (S.data, s.traditional);} Param method if (Jquery.isarray (a) | | | (A.jquery &&!jquery.isplainobject (a))) {        //Serialize The form elements        Jquery.each (A, function () {            Add (this.name, this.value);        });    } els e {        //If Traditional, encode the ' old ' (the 1.3.2 or older        //did it), otherwise encode params recursivel Y.        For (prefix in a) {            buildparams (prefix, a[prefix], traditional, add);        }    }

Now that's clear, if it's JSON data, loop through them, just take their name property and the Value property to stitch the string.

If it is a normal object, iterate over the object's properties and then stitch the string.

Summarize:

So what this article is going to say is that in the Ajax function of jquery, you can pass in 3 types of data

1. Text: "Uname=alice&mobileipt=110&birthday=1983-05-12"

2.json object: {uanme: ' Vic ', Mobileipt: ' A ', Birthday: ' 2013-11-11 '}

3.json Arrays:

[    {"name": "Uname", "Value": "Alice"},    {"name": "Mobileipt", "value": "{"},       {"name": "Birthday", "value" : "2012-11-11"}]
So, we can get the form and submit it in one click, it's very convenient.

Add:
In fact, the extraction of form data only requires the Serialize () method to obtain the "uname=alice&mobileipt=110&birthday=1983-05-12" directly.

Original address: http://www.cnblogs.com/haitao-fan/p/3908973.html
(Individuals feel that some comments in the original text are also very nutritious)