JQuery Ajax front-end and back-end data interaction issues

Source: Internet
Author: User

Principle: Front-end and back-end data interaction, most commonly used is get, post, more commonly used is: Submit form data to the backend, back end back to JSON

      • Front-end data sending and receiving
        1) Submit form data
        2) Submit JSON data
      • Back-end data reception and response
        1) receive the GET Request data
        2) receive POST request data
        3) responding to requests

1. Submit form data

1) Get request

1 vardata = {2"Name": "Test",3"Age": 14 };5 $.ajax ({6Type: ' GET ',7URL:/your/url/,8Data:data,//will eventually be converted to a query string followed by the URL:/your/url/?name=test&age=19DataType: ' JSON ',//Note: This refers to the data that you want the server to return in JSON formatTenSuccessfunction(data) {//the data here is in JSON format. One     }, AErrorfunction(XHR, type) { -     } -});

2) Post request

1 vardata = {}2 //If the page does not have a form, just the input box, and the request simply sends these values, then you can get them directly into data3data[' name '] = $ (' #name '). Val ()4 5 //If the page has a form, you can use the jquery serialize () method to get all of the form's data6Data = $ (' #form1 '). Serialize ();7 8 $.ajax ({9Type: ' POST ',TenURL:/your/url/, One Data:data, ADataType: ' JSON ',//Note: This refers to the data that you want the server to return in JSON format -Successfunction(data) {//the data here is in JSON format. -     }, theErrorfunction(XHR, type) { -     } -});

Note
A) Parameter datatype: The data type of the expected server response, which can be null, XML, script, JSON
B) Content-tpye in the request header is the default Content-Type:application/x-www-form-urlencoded , so the parameters are encoded in name=xx&age=1 format, submitted to the backend, and the backend is treated as a form data 2. Submit JSON DataIf you want to pass JSON data to the backend, you need to add the Content-type parameter, tell the backend, pass the data format, and need to transfer data to a string. In fact, when the server is received, the discovery is in JSON format, and the operation is to convert the string to a JSON object.
In addition, not to a string, even if the Content-type parameter is added, it will be converted to name=xx&age=1 by default, so that the backend cannot get the correct JSON
1 //post a JSON data2 3 vardata = {4"Name": "Test",5"Age", 16 }7 $.ajax ({8Type: ' POST ',9URL:/your/url/,TenData:JSON.stringify (data),//Convert to String OneContentType: ' Application/json; Charset=utf-8 ', ADataType: ' JSON ',//Note: This refers to the data that you want the server to return in JSON format -Successfunction(data) {//the data here is in JSON format. -     }, theErrorfunction(XHR, type) { -     } -});

Article Reproduced Link: Https://www.jianshu.com/p/4350065bdffe (detailed background data receive and return)

JQuery Ajax front-end and back-end data interaction issues

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.