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

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