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

Source: Internet
Author: User

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 );}});

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.