Home > Web Front-end > JS Tutorial > body text

ajax study notes 3_jquery in jquery

WBOY
Release: 2016-05-16 18:00:49
Original
946 people have browsed it

Summary:
Ajax Learning 1 introduces the use of jquery-encapsulated ajax to receive server-side text data and the use of XMLHttpReques objects to receive server-side text data.
Ajax Learning 2 introduces the use of XMLHttpReques to receive server-side XML data. , this section mainly introduces the use of ajax encapsulated by jqery to receive server-side data in XML format.

Since a lot of knowledge has been introduced in detail, this section only introduces the code that needs to be modified. Ajax encapsulated by jqery uses XML format to receive server-side data. Web.xml and the backend servet do not need to be modified.
Just change the name of the method called in ajax.html to the newly added javascript method.

Introduction to the main method used:
jQuery.ajax(options): Load remote data through HTTP requests,
Return value: XMLHttpRequest
Parameters: options (optional), ajax request settings. All options are optional.
Introduction to the main options:
type (String): (Default: "GET") Request method ("POST" or "GET"), the default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but only some browsers support
url (String): (Default: current page address) The address to send the request
data (Object,String): Data sent to the server. Will be automatically converted to request string format. The GET request will be appended to the URL
dataType (String): the data type expected to be returned by the server.
If not specified, jQuery will automatically return responseXML or responseText based on the HTTP packet MIME information and pass it as a callback function parameter. Available values:
"xml": Returns an XML document that can be processed by jQuery.
"html": Returns plain text HTML information; contains script elements.
"script": Returns plain text JavaScript code. Results are not cached automatically.
"json": Returns JSON data
success (Function): Callback function after the request is successful. Parameters: Server returns data, data format
error (Function): (Default: automatic judgment (xml or html)) Call time when the request fails
async (Boolean): (Default: true) Under default settings, all The requests are all asynchronous requests.
Set this option to false if you need to send synchronous requests. Note that the synchronous request will lock the browser, and the user must wait for the request to complete other operations before executing

The new javascript method is as follows:

Copy code The code is as follows:


//Load remote data through HTTP request through $.ajax() method
function verifyJqueryXML(){
var jqueryObj= $("#username");
var username= jqueryObj.val();
//A simple object definition method in javascript
//var obj={name: "abc",age:20};
//Using the encapsulation of the get request of jquery's XMLHTTPRequest object
$.ajax({
type:"POST",//Request method
url:"AJAXXMLServer", //Server-side url address
data:"name=" username, //Send Data to the server
dataType: "xml", // Tell Jquery the data format returned
success:callback1 // The callback function is called when it is completed interactively and the server returns the data correctly
}) ; //Note that url and dataType must correspond to
}
function callback1(data){
//First, you need to convert the dom object into a Jquery object
var jqueryObj=$(data);
//Get the message node
var message=jqueryObj.children();
//Get the text content
var text=message.text();
//Dynamicly display the server-side value On the page
var resultObj=$("#result");
resultObj.html(text);
}

obtained by the above generation, in ajax.html The name of the calling javascript method should be changed to: verifyJqueryXML()
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template