Details about the data parameter type instance of JQuery. Ajax (), jquery. ajaxdata

Details about the data parameter type instance of JQuery. Ajax (), jquery. ajaxdata

If there is such a form, it is used to add elements.

<Form id = 'addform' action = 'useradd. action 'Type = 'post'> <label for = 'uname'> User Name </label>: <input type = 'text' name = 'uname' id = 'uname'> <br> <label for = 'leleip'> mobile phone number: </label> <input type = 'text' name = 'leleip' id = 'leleip'> <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 form submit, so we just want to use ajax to submit.

Previously we implemented the following:

Function addUser () {var user = {uname: $ ("# uname "). val (), mobileept: $ ("# mobileIpt "). val (), birthday: $ ("# birthday "). val ()}; $. ajax ({url: 'useradd. action ', data: user, type: 'post', ype: 'text', success: function (msg) {if (msg = '1') {console. log ('added successfully');} else {console. log ('add failed ')}}})}

There is nothing wrong with this, that is, it is too troublesome to get the value of the form element... there are only three items here, and many items are discarded ....

Until one day, I found the jquery serializeArray method.

Serialized table elements (similar to the '. serialize ()' method) return JSON data structure data.
Note that this method returns a JSON object instead of a JSON string. You need to use plug-ins or third-party libraries for string-based operations.
The returned JSON object is composed of an array of objects. Each object contains one or two name-value pairs -- name and value parameters (if the value is not empty ).

Let's try it.

$ ('# AddForm '). serializeArray (); // The returned data structure, which is a json array. Each object name and value are the key, which indicates the name and value [{"name ": "uname", "value": "" },{ "name": "mobileIpt", "value": "" },{ "name": "birthday ", "value": ""}]

This seems useless.

Let's take a look at the JQuery. param () method:

var arr = $('#addForm').serializeArray();$.param(arr);"uname=alice&mobileIpt=110&birthday=1983-05-12"

Hey, this meets our requirements. Although it is not of the json type, it can at least be uploaded as data.

Here, we can directly fill in the json array in the ajax data field and call $. param () for processing in jquery.

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

Returned value: StringjQuery. param (obj, [traditional]) serializes an array of form elements or objects. The [traditional] array or jQuery object is serialized according to the name/value pair, and the common object is serialized according to the key/value pair. Traditional: whether to use the traditional method of shallow serialization. Demo: $. param ({uanme: 'vic ', mobileept: '000000', birthday: '2017-11-11'}); "uanme = vic & mobileIpt = 110 & birthday ="

Looking at the instructions, it seems that we have nothing to do with it. Let's look at it with a json array.

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);"undefined=&undefined=&undefined="

This conversion fails. Why can we convert the data in the form to url parameters? Let's take a look at jquery source code.

// In the ajax () method, $. param () is processed for json-type data. if (s. data & s. processData & typeof s. data! = "String") {s. data = jQuery. param (s. data, s. traditional);} // if (jQuery. isArray (a) | (. jquery &&! JQuery. isPlainObject (a) {// Serialize the form elements jQuery. each (a, function () {add (this. name, this. value);} else {// If traditional, encode the "old" way (the way 1.3.2 or older // did it), otherwise encode params recursively. for (prefix in a) {buildParams (prefix, a [prefix], traditional, add );}}

Now, I understand. If it is json data, we can concatenate strings using their name attribute and value Attribute in one loop.

For a common object, loop through the attributes of the object and splice the string.

Summary:

Therefore, in this article, three types of data can be imported into the ajax function of jquery.

1. Text: "uname = alice & mobileept = 110 & birthday ="

2. json object: {uanme: 'vic ', mobileIpt: '000000', birthday: '2017-11-11 '}

3. json array:

[  {"name":"uname","value":"alice"},  {"name":"mobileIpt","value":"110"},    {"name":"birthday","value":"2012-11-11"}]

Therefore, it is very convenient to obtain and submit a form with one click.

Supplement:

In fact, to extract form data, you only need the serialize () method to directly obtain "uname = alice & mobileept = 110 & birthday = 1983-05-12.

Ps: ajax Method data parameter usage Summary In jquery

$. Ajax ({type: post, url: some. php, data: name = john & location = boston, // The first method for passing the parameter // data: {name: john, location: boston} // The second method for passing the parameter // data: {foo: [bar1, bar2]} is converted to '& foo = bar1 & foo = bar2'/* the first type is url-based parameter. If the parameter contains the Ampersand, the parameters may not be received or are incomplete, for example, "data: name = john & location = boston," If the name field is john & smith, this may cause a problem, we can use the encodeuricomponent () method in js to escape, but if we use the data: {name: john, location: boston} method to write data, we do not need to escape it, if it is escaped, the receiving location will be the escape string */success: function (msg) {alert (data saved: + msg );}});