Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use Ajax in JQuery. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

JQuery encapsulates Ajax operations. The bottom method of JQuery is $.ajax (), the second layer is load () $.get () $.post (), and the third layer is $.getScript () and $.getJSON ().

Insert title here$ (function () {$("a") .click (function () {var url = this.href; var args = {"time": new Date ()}; $("# content") .load (url, args); return false;});}); hello

The load () method is the simplest and most commonly used Ajax method in JQuery, which can be loaded into remote HTML code and inserted into DOM. Its structure is load (url [, data] [, callback])

Url (String) requests the URL address of the HTML page

Data (optional) (Object) key/value data sent to the server

Callback (optional) (Function) callback function when the request is completed, regardless of whether the request succeeds or fails

You can use url selector

Insert title here$ (function () {$("a") .click (function () {/ / var url = this.href;// default full selection / / var url = this.href + "h3"; / / Select h3 part var url = this.href + "H3a"; / / Select part a var args = {"time": new Date ()} $("# details") .load (url, args); return false;});}) Baidu

A.html

Http://www.baidu.comH2 TestQQ

The $.get () (or $.post ()) method

The $.get () method uses GET to make asynchronous requests, and the structure is $.get (url [, data] [, callback] [, type])

Url (String) requests the URL address of the HTML page

Data (optional) (Object) key/value data sent to the server, data bits appended to the requested url as QueryString

Callback (optional) (Function) callback function when loaded successfully (this method is called only if the return status of reponse is success) automatically passes the request result and status to the method

Type (optional) (String) format of the content returned by the server, including xml, html, script, json, text, default

Textstatus represents request status, including success error notmodify timeout

$.get () $.post () is a global function in JQuery

Methods such as find () are methods for manipulating JQuery objects.

Insert title here $(function () {$("a") .click (function () {var url = this.href; var args = {"time": new Date ()}; / / args: JSON format / / function callback function, which is triggered when the corresponding end occurs. The response result is in data $.post (url, args, function (data) {/ / $.get (url, args, function (data) {/ / here there is no difference between post and get var name = $(data). Find ("name"). Text () Var website = $(data). Find ("website"). Text (); var email = $(data). Find ("email"). Text () $("# details") .empty () .append ("" + name+ "") .append ("" + website+ ""); return false;}) }) andy

Andy.xml

Andy Budd http://www.baidu.com umgsai@126.com

The following uses data in json format to implement the above functions

Insert title here $(function () {$("a") .click (function () {var url = this.href; var args = {"time": new Date ()}; / / args: JSON format / / function callback function, which is triggered when the corresponding end occurs. The response result is in data $.getJSON (url, args, function (data) {var name = $(data) .person.name; var website = $(data) .person.website) Var email = $(data) .person.email $("# details") .empty () .append ("" + name+ "") .append ("" + website+ "");}) Return false;});}) andy

Andy.json

{"person": {"name": "umgsai", "website": "http://www.baidu.com","email":"umgsai@126.com"}}"

Summary:

What is Ajax? You don't have to refresh the page, but you can communicate with the server. The main way to use Ajax is the XMLHttpRequest object

Use the XMLHttpRequest object to implement Ajax (understand). Now it is generally obtained using JQuery or other JS frameworks.

Three ways for Ajax to transmit data

① XML: bulky and difficult to parse. But XML is a common data exchange format.

② HTML: do not need parsing can be directly put into the document, if only part of the update area, but the transfer of data is not very convenient, cut HTML code needs to be assembled.

③ JSON: small, object-oriented, and provides many third-party Jar packages to convert Java objects or collections into Json strings. Is currently the most widely used method.

Use JQuery to complete the Ajax operation

① load method: can be used in the element node of an HTML document, adding the result directly to the child elements of the corresponding node. Usually the data loaded by the load method is a HTML fragment.

Var $obj =.

Var url =...

Var agrs = {key:value,...}

$obj.load (url, args)

② $. Get $. Post $. GetJSON is more flexible. Apart from using the load method, most of them use these three methods.

/ / destination URL of url:Ajax request

/ / args: the passed parameter JSON type

/ / data: the data after a successful Ajax response, which may be XML HTML JSON

$.get (url, args, function (data) {

});

Request JSON data

$.get (url, args, function (data) {

}, "JSON")

$.post (url, args, function (data) {

}, "JSON")

$.getJSON (url, args, function (data) {

})

The above is all the contents of the article "how to use Ajax in JQuery". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.