Extjs Ajax-based frontend and backend data transmission (in JSON format)

Source: Internet
Author: User
Tags call back

Extjs uses ajax to transmit data by using post (using a common form or JSON format) and get (using Params ).

Use JSON (recommended) for returning data)
It should be noted that the server must return the JSON format and set the success value. Of course you can do this, but this method should be officially promoted.

Here we mainly summarize the methods for returning the JSON data server.

The API always specifies the callback format {success; true, data: {clientname: "Fred. Olsen
Lines ",
Portofloading: "fxt", portofdischarge: "OSL "}
}}}

Note that the success and data here are keywords. (Let's call it this way.) in data, the data passes through

EXT

. Decode (response. responsetext). Obtain clientname. the first data is returned.

Success:
Function (response) {}, the response parameter is a JSON string

. Decode parses the data dataset.

// Call back when the call succeeds. The first parameter is the XMLHTTPRequest object, and the second parameter is used to pass in the specified options.

All, the front and back-end code should be as follows:

Background (ASP ):

Response. Write
"{Success: false, data: {MSG: 'The password or user name cannot be blank! '}}"

Response. Write
"{Success: True, data: {MSG: 'login successful! '}}"

Front-end:

Success:
Function (Response, Options

) {Ext

. MessageBox. Alert ('
Prompt ', ext

. Decode (response. responsetext). msg );},

Failure: function (Response, Options

) {Ext

. MessageBox. Alert ('hs', 'ext

. Decode (response. responsetext). msg );},

You can also:

EXT

. Util. JSON. Decode (response. responsetext); parse JSON encoding.

 

In addition, the following code is displayed on the Internet:

Server:

{Success: false, errors: {errstr:
'User name or password error '}}

Client:

Success: function (Form, Action)
{// Response, Options



Location. href = JMP. asp; // after successful login, JS is used for redirection.

},

Failure: function (Form, Action)
{// Response, Options



EXT

. Msg. Alert ('logon failed ',
Action. Result. errors. errstr );

},

You do not need to use the known data keyword. In fact, this is also acceptable. But note that the success keyword must be used.
.!!!!

 

It is not very clear here. I guess the previous example is to use the first parameter for obtaining. Here we use the second parameter for obtaining.

 

The Ext. Ajax. Request method is provided.

 

You can use Ext. Ajax. Request to send an HTTP request to the server and process the returned result in the callback function. Send an HTTP request to the remote server. The signature of this method when Ajax is called is as follows:

Ext. Ajax. rquest ([object options]): Number

The server response is asynchronous. Therefore, you need to process the data returned by the server in the callback function. The callback function can be defined in the options parameter of the request method call. In addition
Some other attributes of the Ajax request can be defined in the request method. The Parameter options is an object that contains various parameters and callback processing parameters required for Ajax requests.
The attributes and meanings of options are as follows:

URL string specifies the server URL to be requested. The default value is the URL parameter value configured in the Ajax object.

Params object/string/function specifies the parameter to be passed. It can be an object containing the parameter name and value, or a URL encoded string similar to name = XX & Birthday = 1978-1-1, or a function that can return the preceding two types of content.

Method string specifies the method used to send an Ajax request, which can be get or post. By default, if no parameters are passed in the request, get is used; otherwise, post is used.

Callback Function specifies the callback function of an Ajax request. This function is executed whether the call is successful or fails. Parameter passed to the callback function
There are three parameters. The first option indicates the parameter when the request method is executed, the second success indicates whether the request is successful, and the third parameter response indicates that the request is executed.
XMLHttpRequest for Ajax requests
Object. For XMLHttpRequest, you can use

Http://www.w3.org/TR/XMLHttpRequest/


Query detailed information.

Success function specifies the callback function executed after the Ajax request is successfully executed and passed to the callback function. The first parameter response indicates the xmlhttprequet object for executing the Ajax request, the second parameter indicates the options object when the request method is executed.

Failure function specifies the callback function that is executed when an error occurs in the request and is passed to the callback function. The first response parameter indicates the xmlhttprequet object that executes the Ajax request, the second parameter indicates the options object when the request method is executed.

Scope object specifies the scope of the callback function. The default is the browser window.

Form object/string specifies the Form ID or form data object to be submitted.

Isupload Boolean specifies whether the form to be submitted is a file upload form. It is automatically checked by default.

Headers object specifies the request header information.

Xmldata object specifies the XML document used for sending to the server. If this attribute is specified, the parameters set elsewhere are invalid.

Jsondata object/string specifies the JSON data to be sent to the server. If this attribute is specified, the parameter value to be sent in other places is invalid.

Whether the disablecaching Boolean disables the cache.

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.