Home > Web Front-end > JS Tutorial > Description of ajax events and get and post requests in jquery

Description of ajax events and get and post requests in jquery

伊谢尔伦
Release: 2017-06-19 09:56:00
Original
1461 people have browsed it

1. jQuery Ajax events

Ajax requests will generate several different events, and we can subscribe to these events 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 for each Ajax request. For example:

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

Global events are triggered for each Ajax request, and they will be sent to all items in the DOM. Element broadcast, the script loaded in the getScript() example above is the global Ajax event. Global events can be defined as follows:

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

or:

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

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

$.ajax({
 url: "test.html",
 global: false,// 禁用全局Ajax事件. // ... });
Copy after login

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

Parameters:

url (String ): The 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 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(textStatus);//请求状态:success,error等等。
 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数 //alert(this); });
Copy after login

Click to send a 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"] + ",你好!(这消息来自服务器)'}");
Copy after login

jQuery Code:

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

Click to submit:

The request format is set to "json":

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

Note, 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 to object.

The above is the detailed content of Description of ajax events and get and post requests in jquery. For more information, please follow other related articles on the PHP Chinese website!

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