jquery ajax几种书写方式的总结

Ajax在前端的应用极其普遍，所以，咱们有必要对其进行总结，以方便后期的使用。

AJAX优势：

　　能够异步请求服务器的数据，实现页面数据的实时动态加载， 在不从新加载整个页面的状况下，能够与服务器交换数据并更新部分网页内容。

 

jquery在全局对象jquery（也就是$）绑定了ajax()函数，能够处理Ajax请求，ajax经常使用的配置选项有：

• async  是否异步执行，默认为True,千万不要指定为False
• method  发送的Method,缺省为“GET”,可指定为‘POST’,'PUT','DELETE', 单词字母必须大写
• contentType  发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也能够指定为‘text/plain’  'application/json'
• data  发送给后端的数据，能够是字符串、数组或对象。若是是GET请求，data将被转换成query附加到url上；若是是POST请求，根据contentType把data序列化成合适的格式
• dataType  接收的数据格式，能够指定为'html' 'xml' 'json' 'text'等，缺省状况下根据响应的Content-Type猜想
• headers 发送的额外的HTTP请求头，必须是一个Object

 

语法一：$.ajax({name:value, name:value, ...})

 1 # 登陆js代码
 2 $(".form-login").submit(function (e) {
 3         e.preventDefault();
 4         mobile = $("#mobile").val();
 5         pwd = $("#password").val();
 6         var data = {
 7             mobile: mobile,
 8             pwd: pwd
 9         };
10         $.ajax({
11             url: "/api/***",
12             type: "POST",
13             data: JSON.stringify(data),
14             contentType: "application/json",
15             dataType: "json",
16             headers: {"X-CSRFToken": getCookie('csrf_token')},
17             success: function (resp) {
18                 if (resp.error == 0){
19                     // resp 是后端经过json.dumps()返回的json格式数据:res={"error":0, "errmsg":"登陆失败"}
20                     // resp = json.dumps(res)
21                     // 请求成功，跳转页面
22                     location.href = '/'
23                 }
24                 else {
25                     alert(resp.errmsg)
26                 }
27             }
28         })
29     })

$.ajax()

 

语法二：$.get(URL, params, function(resp, status_code){}) 

　　　　URL必需参数；

　　　　params可选参数，params={key:value...}, 会以?key=value&key=value...的方式自动添加到URL后面　　

　　　　function(resp, status_code) 可选参数，是请求成功后所执行的函数，resp是后台返回的数据； states_code是自动生成的响应状态码，可缺省

 1 #  更新首页房源展现信息
 2 var params = {
 3         aid: 0,
 4         sd: "2018-2-20",
 5         ed: "2019-2-29",
 6         page: 1
 7     };
 8 $.get("/api/v1_0/houses", params, function(resp){
 9         if (resp.error == 0){
10             $(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses}));
11         }
12         else {
13             $(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses}));
14         }
15     })

$.get()

 

语法三：$.post(URL, data, function(resp, states_code){})

　　　　URL必选参数；

　　　　data 可选参数 连同请求发送的数据；

　　　　function(resp, status_code) 可选参数，是请求成功后所执行的函数，resp是后台返回的数据； states_code是自动生成的响应状态码，可缺省

 1 $("button").click(function(){
 2     $.post("/try/ajax/demo_test_post.php",
 3     {
 4         name:"mjy",
 5         url:"https://cnblogs.com/We612/"
 6     },
 7         function(data,status){
 8             alert("数据: \n" + data + "\n状态: " + status);
 9     });
10 });

View Code

 

说明：　　

　　$.GET 基本上用于从服务器得到（取回）数据。注释：GET 方法可能返回缓存数据。

　　$.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，而且经常使用于连同请求一块儿发送数据。

　　实际应用中多用到语法一  语法二， 语法三较少