jQuery - AJAX 簡介
AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
什么是 AJAX？
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網頁的情況下，AJAX 通過后台加載數據，並在網頁上進行顯示。
關於 jQuery 與 AJAX
jQuery 提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。
 |
如果沒有 jQuery，AJAX 編程還是有些難度的。
編寫常規的 AJAX 代碼並不容易，因為不同的瀏覽器對 AJAX 的實現並不相同。這意味着您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 AJAX 功能。 |
|---|
jQuery對ajax的支持
$(json_arr).each()
方法1：jQuery遍歷json數組
// 語法 $(json_arr).each(function(index, obj){ index:遍歷出來的元素的下標; obj：遍歷出來的元素; });
$.each(json_arr, function(i, obj)
方法2：jQuery遍歷json數組
//利用全局數組 $.each(json_arr, function(i, obj){ index:遍歷出來的元素的下標; obj：遍歷出來的元素; json_arr:js的json普通數組 console.log('unma:'+obj.uname); });
$obj.load()
作用
把指定URL的HTML內容 加載到指定的元素中
語法
$obj.load(url, data, callback) $obj:顯示內容的元素（HTML元素） url:請求地址 data:向url傳入的參數【可選擇】 方式1(GET請求)： 查詢字符串：key=value&key1=value1... 方式2（POST請求）: 使用js對象/JSON對象 {"name":"gengyufei"} 【注意】：不傳參數時，默認get請求 callback:響應成功回調該函數【可選擇】
$.get()
作用：
通過get方式異步的向遠程地址發送請求
$.get(url, data, callback, type) url:請求地址 data:傳遞到服務器端的參數 1、字符串："name=geng&age=18" 2、js對象: { name:'geng', age:18 } callback:響應成功后的回調函數 // data:后端返回到前端的返回值 eg:function(data){ console.log(data) } type:響應回來的數據格式 取值如下： 1.html:響應回來的文本是html文本 2.text：響應回來的文本是text文本 3.script：響應回來的文本是js執行腳本 4.json：響應回來的文本是json格式的文本
實例：
<head>
// 引入jQuery
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script>
</head>
<body>
<button id="btn">ajax_jquery_get</button>
<div id="ajax_jquery_get_show"></div>
<script>
$(function () { // $(function ()作用：等待頁面加載完畢，再執行js代碼
// 獲取btn對象（按鈕事件）
$('#btn').click(function () {
// 主角出現：jQuery的get方法
// $.get(url, data, 回調函數, type)
$.get('/ajax/jquery_get_server/', function (data) {
// 假裝'/ajax/jquery_get_server/'該地址返回json字串：{"uname": "...", "age":"..."}
var msg = 'name is ' + data.uname;
msg += 'age is ' + data.age;
// 在id=ajax_jquery_get_show的div元素內顯示msg
// $('#id_html').html(msg)作用：在id=id_html的html元素內，顯示msg
$('#ajax_jquery_get_show').html(msg);
}, 'json')
})
})
</script>
</body>
$.post()
作用：
通過post方式異步的向遠程地址發送請求
注意： post方式，參數：必須包含csrf_token!!!（這個是針對Django開發來講的，如果是其他語言或者框架，另當別論）
$.get(url, data, callback, type) url:請求地址 data:傳遞到服務器端的參數 1、字符串："name=geng&age=18" 2、js對象: { name:'geng', age:18 csrf: } callback:響應成功后的回調函數 // data:后端返回到前端的返回值 eg:function(data){ console.log(data) } type:響應回來的數據格式 取值如下： 1.html:響應回來的文本是html文本 2.text：響應回來的文本是text文本 3.script：響應回來的文本是js執行腳本 4.json：響應回來的文本是json格式的文本
實例：
<head>
// 引入jQuery
<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script>
</head>
<body>
{# $.post() #}
<div>
name:<input type="text" id="input_name">
age: <input type="text" id="input_age">
<input type="submit" id="submit" value="提交">
</div>
<script>
$(function () { // $(function ()作用：等待頁面加載完畢，再執行js代碼
$('#submit').click(function () {
var data = {
name:$('#input_name').val(),
age:$('#input_age').val(),
// 關鍵點：沒有csrf_token，會報錯：403，forbidden
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
}
// $.post(url, data, func, type)
// 假裝'/ajax/jquery_get_server/'該地址返回json字串：{"msg": "..."}
$.post('/ajax/jquery_post_server/', data, function (res) {
// alert :在瀏覽器彈窗，顯示后端返回信息
alert('response msg is'+ res.msg);
}, 'json')
})
})
</script>
</body>
作用：
jQuery對ajax的終極支持！！！
# 最高頻使用的8個參數： 參數對象中的屬性： 1.url:字符串，表示異步請求的地址 2.type：字符串，請求方式：get或post 3.data：傳遞到服務器端的參數 1、字符串："name=geng&age=18" 2、js對象: { name:'geng', age:18 csrf: } 4.dataType：字符串，響應回來的數據的格式 1.'html' 2.'xml' 3.'text' 4.'script' 5.'json' 6.'jsonp' //有關跨域的響應格式 5.success：回調函數，請求和響應成功時，回來執行的操作 6.error：回調函數，請求或響應失敗時，回來執行的操作 7.beforeSend：回調函數，發送ajax請求之前，執行的操作，如：return false，則終止請求 8.async:是否為異步請求，true為異步，false為同步
語法：
$.ajax({ url:'', type:'get'/'post', data:{ name:'', csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), }, dataType:'json', success:function () { }, error:function(){ }, beforeSend:function(){ }, })
實例：
$("button").click(function(){
$.ajax({
url:"demo_test.txt",
type:'post',
data:{
name:'',
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
},
dataType:'json',
success:function(result){
$("#div1").html(result);
},
beforeSend:function(){
},
});
});
beforeSend經典用法：
-
場景：用戶注冊
-
功能：
-
用戶輸入賬號密碼完畢
-
點擊【提交】按鈕完畢
-
在網絡傳輸過程中，網速慢的情況下，顯示動畫效果，等待服務器響應
-
在網絡傳輸過程中，網速慢的情況下，提交按鈕變為灰色不可用狀態，直到得到服務器響應
-
-
代碼實現：
<head> // 引入jQuery <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script> </head> {# $.ajax() #} <body> <span id="loading" style="display: none">加載中...[我是動畫]</span> <button id="btn">jquery ajax</button> <script> $(function () { $('#btn').click(function () { $.ajax({ url: '/ajax/jquery_ajax', type: 'post', data:{ csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(), }, dataType:'json', async:true, success:function () { // post 請求發送成功 $('#loading').hide(3000); // 3秒內消失 // 彈框：登錄成功 alert('登錄成功'); // 提交按鈕改為可用狀態 $('#btn').removeAttr('disabled'); }, error:function () { }, beforeSend:function () { // 發送前，do something $('#loading').show(); // 發送前，讓等待元素span顯示（show） // 發送前，讓button置灰，不可點擊 $('#btn').attr({disabled:'disabled'}) }, }) }) }) </script> </body>
經典用法：異步獲取用戶列表
-
場景：異步刷新用戶列表界面
-
實例：
<head> // 引入jQuery <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/jquery-1.12.4.min.js' %}"></script> </head> <body> <button id="btn">show data</button> <thead> <tr> <th>name</th> <th>age</th> </tr> </thead> <tbody id="show"></tbody> <script> $(function () { $('#btn').click(function () { $.ajax({ url: '/ajax/jquery_show', type: 'get', dataType: 'json', async: true, data: {}, success: function (data) { var html = ''; $.each(data, function (i, obj) { html += '<tr>'; html += '<td>' + obj.name + '</td>'; html += '<td>' + obj.age + '</td>'; html += '</tr>'; }); $('#show').html(html); // 在id= show的html標簽顯示用戶信息 }, error: function () { }, beforeSend: function () { }, }) }) }) </script> </body>