JavaScript's Ajax-6 Ajax enhancements (jquery support for Ajax, form manipulation)

I. jquery's support for Ajax

Load ()

-Role: Add data bytes returned by the server to the node that meets the requirements

Usage

$obj. Load (Request address, request parameter)

-Request Parameters

-"username=tom&age=22"

-{' username ': ' Tom ', ' Age ': 22}

-The Load method sends a POST request when there is a request parameter, otherwise a GET request is sent

Get ()

-Role: Send a Get type of request

-Usage: $.get (request address, request parameter, callback function, data type returned by the server)

Description

-the parameter added by the callback function is the data returned by the server

-The type of data returned by the server:

html:html text

Text: Literal

Json:js Object

Xml:xml Documentation

Script:javascript Script

Ajax ()

-Usage: $.ajax ({});

-option parameters that can be set within {}

-URL: Request Address

-Type: Request method

-Data: Request parameters

-DataType: The type of data returned by the server

-Success: The server handles the normal corresponding callback function

-Error: callback function corresponding to server error

-Async:true (default)

GetScript ()

-Role: Loading and executing JavaScript files via HTTP GET request

-Usage: $.getscript (url,success (response,status));

-url: The URL string that will be requested

-Success (Response,status): Optional, specifies the callback function to execute after the request succeeds

Response-Contains the result data from the request

Status-Contains the state of the request

sucess

Notmodified

Error

Timeout

ParserError

One, form operation

Submitting data using Ajax

-Step 1: Get form elements, by

document.getElementById or jquery's factory function gets the page element value

-Step 2: Piece together the retrieved page element values into a string or JSON string

-Step 3: Use Ajax to submit forms asynchronously

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/7A/wKioL1cCPtWi8vPFAAB27Ar1J9g820.png "title=" Web.png "alt=" Wkiol1ccptwi8vpfaab27ar1j9g820.png "/>650" this.width=650; "src=" http://s5.51cto.com/wyfs02/M01/ 7e/7b/wkiol1ccpvdhhljlaabyjwxrf7o932.png "title=" Web.png "alt=" Wkiol1ccpvdhhljlaabyjwxrf7o932.png "/>650" this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/7E/wKiom1cCPmDxNf0bAABo2Stj8LA607.png "title=" Web.png " alt= "Wkiom1ccpmdxnf0baabo2stj8la607.png"/>

Serialization of Forms

-Serialization: Converting an object's state to a format that can be persisted or transferred

-form serialization: Convert form elements to a committed string or JSON string

-Data storage and transfer can be easily achieved by serialization

-in jquery, form elements can be serialized into ordinary strings through the serialize () method, and the form elements are serialized into JSON strings through the Serializearray () method

Serialize () method

-format: var data = $ ("#formId"). Serialize ();

-Function: Serialize the form contents into a single string

-So when the Ajax submits the form data, it is not necessary to enumerate each parameter. Simply set the data parameter to $ ("#formId"). Serialize ()

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/7B/wKioL1cCQNWS1h4qAAAVTssosZM625.png "title=" Web.png "alt=" Wkiol1ccqnws1h4qaaavtssoszm625.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/ 7e/7b/wkiol1ccqo_xiujhaabjpwhgs40287.png "title=" Web.png "alt=" Wkiol1ccqo_xiujhaabjpwhgs40287.png "/>

Serializearray () method

-format: var jsondata = $ ("#formId"). Serializearray ();

-Function: Serializes the page form into a JSON-structured object. Note Not a JSON string

-for example, [{"Name": "WCM", "Age": "18"},{...}] Get data for Jsondata[0].name

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/7B/wKioL1cCQarBaKRrAAAYS8qlpuE027.png "title=" Web.png "alt=" Wkiol1ccqarbakrraaays8qlpue027.png "/>650" this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/ 7e/7b/wkiol1ccqb6xz4pzaaca0c-lsls734.png "title=" Web.png "alt=" Wkiol1ccqb6xz4pzaaca0c-lsls734.png "/>

Submission of asynchronous forms

-a form can be submitted asynchronously via Ajax for a good user experience

-Step 1: Get form submission, server address, serialized form

-Step 2: Asynchronously submit content to the server via Ajax

-Step 3: Returns false in the form submission method, which prevents form default submission

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/7B/wKioL1cCQryzfKrQAAHaj0dGxKI844.png "title=" Web.png "alt=" Wkiol1ccqryzfkrqaahaj0dgxki844.png "/>650" this.width=650; "src=" http://s4.51cto.com/wyfs02/M02/ 7e/7e/wkiom1ccqi3z4oawaaf49rfvys4315.png "title=" Web.png "alt=" Wkiom1ccqi3z4oawaaf49rfvys4315.png "/>

To submit a form asynchronously using Jquery.form

-JQuery Form plugin is an excellent AJAX form plug-in that allows you to upgrade HTML forms and support Ajax very easily and without intrusion

JQuery form has two core methods--ajaxform () and Ajaxsubmit (), which gather functionality from controlling form elements to deciding how to manage the commit process

-Ajaxform (): The form cannot be submitted. In the ready function of document, use Ajaxform to prepare the form for the AJAX submission

-Ajaxsubmit (): The form is immediately submitted by Ajax. You can make the submission under any circumstances

-Ajaxform () and Ajaxsubmit () can accept 0 or 1 parameters, which can be either a callback function or an options object when a single parameter is used

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/7E/wKiom1cCQ8GTpf6_AAK2gq-U2Yc771.png "title=" Web.png "alt=" Wkiom1ccq8gtpf6_aak2gq-u2yc771.png "/>

Beforesubmit:showrequest

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/7E/wKiom1cCQ_2BeoBjAAFAFhYHhzg203.png "title=" Web.png "alt=" Wkiom1ccq_2beobjaafafhyhhzg203.png "/>

Success:showresponse

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/7B/wKioL1cCRNjSIti-AADdosm_uPY144.png "title=" Web.png "alt=" Wkiol1ccrnjsiti-aaddosm_upy144.png "/>

Summary: This chapter focuses on the enhancement of AJAX operations (jquery support for Ajax, form operations)

This article from the "Flying Ants" blog, declined to reprint!

JavaScript's Ajax-6 Ajax enhancements (jquery support for Ajax, form manipulation)