Detailed explanation of the usage of jQuery Ajax (load, post, get, ajax)

This article mainly brings you a detailed discussion on the usage of jQuery Ajax (load, post, get, ajax). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Today I saw some netizens in the group asking about the differences between Jquery Ajax (load, post, get, ajax). Now I have compiled an article, hoping to help netizens. , first let’s look at some simple methods.

These methods are all methods that encapsulate jQuery.ajax() to facilitate our use. Of course, if you want to deal with complex logic, you still need to use jQuery .ajax() (this will be discussed later).

1. load(url, [data], [callback]): Load the remote HTML file code and insert it into the DOM.

url (String): The URL address of the requested HTML page.

data (Map): (optional parameter) key/value data sent to the server.

callback (Callback): (optional parameter) The callback function when the request is completed (does not need to be successful).

This method uses the GET method to pass by default. If the [data] parameter has data passed in, it will be automatically converted to the POST method. In jQuery 1.2, you can specify the selector,

to filter the loaded HTML document, and only the filtered HTML code will be inserted into the DOM. The syntax is like "url #some > selector".

This method can easily dynamically load some HTML files, such as forms.

Sample code:

$(".ajax.load").load("http:
//www.jb51.net",function (responseText, textStatus, XMLHttpRequest)
{this;//在这里this指向的是当前的DOM对象，
即$(".ajax.load")[0]
 //alert(responseText);
//请求返回的内容
/alert(textStatus);
//请求状态：success，error
//alert(XMLHttpRequest);
//XMLHttpRequest对象});

Note: I don’t know why writing an absolute path to a URL will cause an error under FF. If you know, please tell me. The get() and post() examples below use absolute paths, so under FF you will get an error and will not see the results returned. There are also get() and post() examples that are called cross-domain. I found that there was no way to get the results after uploading them, so I removed the run button.

2. jQuery.get( url, [data], [callback] ): Use GET method to make asynchronous requests

Parameters:

url (String): Send Requested URL address.

data (Map): (Optional) The data to be sent to the server, expressed in the form of Key/value pairs, will be appended to the request URL as QueryString.

callback (Function): (optional) Callback function when loading is successful (this method is called only when the return status of Response is success).

This is a simple GET request function to replace the complex $.ajax. The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.

Sample code:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"},
function (data, textStatus)
{//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.this; 
// 在这里this指向的是Ajax请求的选项配置信息，请参考下图alert(data);
//alert(textStatus);
//请求状态：success，error等等。

Of course, the error cannot be caught here, because the callback function will not be run at all when there is an error //alert(this);});

Click to send the request:

This in the jQuery.get() callback function points to the option configuration information of the Ajax request:

3. jQuery.post( url, [data], [ callback], [type] ): Use POST method to make asynchronous requests

Parameters:

url (String): URL address to send the request.

data (Map) : (Optional) The data to be sent to the server, expressed in the form of Key/value pairs.

callback (Function): (optional) Callback function when loading is successful (this method is called only when the return status of Response is success).

type (String): (Optional) The official description is: Type of data to be sent. In fact, it should be the type of client request (JSON, XML, etc.)

This is a simple POST request function to replace the complex $.ajax. The callback function can be called when the request is successful. If you need to execute a function on error, use $.ajax.

Sample code:

Ajax.aspx:

Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

jQuery code:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus)
{// data 可以是 xmlDoc, jsonObj, html, text, 等等.//this; 
// 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的thisalert(data.result);}, "json");

Click to submit:

The request is set here The format is "json":

If you set the request format to "json" and you do not set the ContentType returned by Response to: Response.ContentType = "application/json"; then you will not be able to capture it. to the returned data.

Note that alert(data.result); since the Accept header is set to "json", the data returned here is an object, and there is no need to use eval() to convert it into an object.

4. jQuery.getScript( url, [callback] ): Request to load and execute a JavaScript file through GET method.

Parameters

url (String): The address of the JS file to be loaded.

callback (Function): (optional) Callback function after successful loading.

Before jQuery 1.2, getScript could only call JS files in the same domain. In 1.2, you can call JavaScript files across domains. Note: Safari 2 or earlier cannot execute scripts synchronously in the global scope. If you add a script via getScript, please add a delay function.

This method can be used, for example, to load the JS files required by the editor when only the editor is focus(). Here are some sample codes:

Load and execute test.js.

jQuery code:

$.getScript("test.js");

Load and execute AjaxEvent.js, and display information after success.

jQuery code:

$.getScript("AjaxEvent.js", function(){alert("AjaxEvent.js is loaded and executed. Click the Get or Post button above See what's the difference? ");});

jQuery Ajax Event

Ajax requests generate several different events that we can subscribe to and process our logic in them. There are two types of Ajax events in jQuery: local events and global events.

Local events are defined within the method during each Ajax request, for example:

$.ajax({beforeSend: function(){// Handle the beforeSend event},complete : function(){// Handle the complete event}// ...});

The global event is triggered by every Ajax request. It will be broadcast to all elements in the DOM. Above The script loaded in the getScript() example is the global Ajax event. Global events can be defined as follows:

$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function( ){$(this).hide();});

Or:

$("#loading").ajaxStart(function(){$(this).show() ;});

We can disable global events in specific requests, just set the global option:

$.ajax({url: "test.html",global : false,//Disable global Ajax events.// ...});

The above article discusses the usage of jQuery Ajax (load, post, get, ajax) in detail, which the editor shared with This is all your content, I hope it can give you a reference, and I hope you will support Script House more.

Related recommendations:

Ajax usage simple tutorial

javascript jQuery $.post $.ajax usage

Super simple AJAX usage of jquery_jquery

The above is the detailed content of Detailed explanation of the usage of jQuery Ajax (load, post, get, ajax). For more information, please follow other related articles on the PHP Chinese website!