Django學習【第20篇】：Ajax 初始Ajax
阿新 • • 發佈：2018-12-21
初始Ajax
一、Ajax準備知識：json
說起json，我們大家都瞭解，就是python中的json模組，那麼json模組具體是什麼呢？那我們現在詳細的來說明一下
1、json(Javascript Obiect Notation,JS物件標記)是一種輕量級的資料交換格式。
它基於 ECMAScript (w3c制定的js規範)的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。 簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。
2、json其實是從js中拿出來的一個物件，也可以說json是js的一個子集。
需要知道的：json的格式來源於js的格式
1、js支援單引號，也支援雙引號，也可以沒有引號
//在js中吧{}這樣的型別叫做物件，js中沒有字典一說
data = {
'name':'haiyan',
"name":"haiyan",
name:"haiyan"
} //js物件預設會把自己的鍵當成字串處理，所以可以加引號也可以不加
2、json的格式：
1、json只認雙引號的
2、json一定是一個字串
3、下面我們看看哪些是合格的字串，那些不是？
合格的json物件：
1 ["one", "two", "three"]
2
3 { "one": 1, "two": 2, "three": 3 }
4
5 {"names": ["張三", "李四"] }
6
7 [ { "name": "張三"}, {"name": "李四"} ]
不合格的json物件：
1 { name: "張三", 'age': 32 } // 屬性名必須使用雙引號
2
3 [32, 64, 128, 0xFFF] // 不能使用十六進位制值
4
5 { "name": "張三", "age": undefined } // 不能使用undefined
6
7 { "name": "張三",
8 "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
9 "getName": function() {return this.name;} // 不能使用函式和日期物件 10 }
+++++++++++++++python中的序列化(dumps)與反序列化(loads)++++++++++++++
import json
i = 10
s = "dsfdsf"
l = [11,22,33]
dic = {"name":"haiyna","age":22}
b = True # #吧基本資料型別轉換成字串的形式 print(json.dumps(i),type(json.dumps(i))) #10 <class 'str'> print(json.dumps(s),type(json.dumps(s))) #"dsfdsf" <class 'str'> print(json.dumps(l),type(json.dumps(l))) #[11, 22, 33] <class 'str'> print(json.dumps(dic),type(json.dumps(dic))) #{"name": "haiyna", "age": 22} <class 'str'> print(json.dumps(b),type(json.dumps(b))) #true <class 'str'> # ===============json反序列化============= d = {"a":1,"b":"fdgfd"} data = json.dumps(d) print(data,type(data)) f = open("a.txt","w") f.write(data) #注意這會寫進去的字串時雙引號的格式 f.close() # ===============json序列化============= f = open("a.txt","r") datat = f.read() print(datat,type(datat)) #{"a": 1, "b": "fdgfd"} <class 'str'> data = json.loads(datat) print(data,type(data)) #{'a': 1, 'b': 'fdgfd'} <class 'dict'>
+++++++++++++++JS中的序列化(stringify)與反序列化(parse)++++++++++++++++++
JSON.stringify():用於將一個JavaScript物件轉換為JSON字串
JSON.parse():用於將一個JSON字串轉換為JavaScript物件
<script>
//===========js中的json序列化===========
s = '{"name":1}';
var data = JSON.parse(s);
console.log(data);
console.log(typeof data); //object
//===========js中的json的反序列化=======
s2={'name':'yuan'};
console.log(JSON.stringify(s2),typeof JSON.stringify(s2)) //string
</script>
二、JSON和XML的比較
1、XML也是存資料的一種格式，也是一種標記語言。它是利用節點進行查詢的
2、JSON 格式於2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。
JSON 格式有兩個顯著的優點：書寫簡單，一目瞭然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外新增解析程式碼。所以，JSON迅速被接受，已經成為各大網站交換資料的標準格式，並被寫入ECMAScript 5，成為標準的一部分。
XML和JSON都使用結構化方法來標記資料，下面來做一個簡單的比較。
用XML表示中國部分省市資料如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <country> 3 <name>中國</name> 4 <province> 5 <name>黑龍江</name> 6 <cities> 7 <city>哈爾濱</city> 8 <city>大慶</city> 9 </cities> 10 </province> 11 <province> 12 <name>廣東</name> 13 <cities> 14 <city>廣州</city> 15 <city>深圳</city> 16 <city>珠海</city> 17 </cities> 18 </province> 19 <province> 20 <name>臺灣</name> 21 <cities> 22 <city>臺北</city> 23 <city>高雄</city> 24 </cities> 25 </province> 26 <province> 27 <name>新疆</name> 28 <cities> 29 <city>烏魯木齊</city> 30 </cities> 31 </province> 32 </country>
用JSON表示如下：
1 {
2 "name": "中國",
3 "province": [{
4 "name": "黑龍江",
5 "cities": {
6 "city": ["哈爾濱", "大慶"] 7 } 8 }, { 9 "name": "廣東", 10 "cities": { 11 "city": ["廣州", "深圳", "珠海"] 12 } 13 }, { 14 "name": "臺灣", 15 "cities": { 16 "city": ["臺北", "高雄"] 17 } 18 }, { 19 "name": "新疆", 20 "cities": { 21 "city": ["烏魯木齊"] 22 } 23 }] 24 }
可以看到，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，並且在資料交換方面，由於 JSON 所使用的字元要比 XML 少得多，可以大大得節約傳輸資料所佔用得頻寬。
注意：
JSON格式取代了xml給網路傳輸帶來了很大的便利,但是卻沒有了xml的一目瞭然,尤其是json資料很長的時候,我們會陷入繁瑣複雜的資料節點查詢中。 但是國人的一款線上工具 BeJson 、SoJson線上工具讓眾多程式設計師、新接觸JSON格式的程式設計師更快的瞭解JSON的結構，更快的精確定位JSON格式錯誤。三、Ajax簡介
1、簡單介紹
我們以前知道的前端向後端傳送資料的方式有：
GET：位址列、a標籤、Form表單
POST：Form表單
那麼現在我們在學習一種：那就是ajax
ajax：也是前端向後端傳送資料的一種方式
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（當然，傳輸的資料不只是XML）。
- 同步互動：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
- 非同步互動：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。
Ajax的特點：
非同步互動： 當請求發出後，瀏覽器還可以進行其他操作，無需等待伺服器的響應！
區域性重新整理： 整個過程中頁面沒有重新整理，只是重新整理頁面中的區域性位置而已！
js的區域性重新整理：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .error{
9 color:red
10 }
11 </style>
12 </head>
13 <body>
14
15
16 <form class="Form">
17
18 <p>姓名 <input class="v1" type="text" name="username" mark="使用者名稱"></p>
19 <p>密碼 <input class="v1" type="text" name="email" mark="郵箱"></p>
20 <p><input type="submit" value="submit"></p>
21
22 </form>
23
24 <script src="jquery-3.1.1.js"></script>
25
26 <script>
27
28 $(".Form :submit").click(function(){
29
30 flag=true;
31
32 $("Form .v1").each(function(){ 33 34 var value=$(this).val(); 35 if (value.trim().length==0){ 36 var mark=$(this).attr("mark"); 37 var $span=$("<span>"); 38 $span.html(mark+"不能為空!"); 39 $span.prop("class","error"); 40 $(this).after($span); 41 42 setTimeout(function(){ 43 $span.remove(); 44 },800); 45 46 flag=false; 47 return flag; 48 49 } 50 }); 51 return flag 52 }); 53 54 55 </script> 56 57 58 </body> 59 </html>
2、ajax的建立應用場景
當我們在百度中輸入一個“老”字後，會馬上出現一個下拉列表！列表中顯示的是包含“老”字的4個關鍵字。
其實這裡就使用了AJAX技術！當檔案框發生了輸入變化時，瀏覽器會使用AJAX技術向伺服器傳送一個請求，查詢包含“老”字的前10個關鍵字，然後伺服器會把查詢到的結果響應給瀏覽器，最後瀏覽器把這4個關鍵字顯示在下拉列表中。
- 整個過程中頁面沒有重新整理，只是重新整理頁面中的區域性位置而已！
- 當請求發出後，瀏覽器還可以進行其他操作，無需等待伺服器的響應！
當輸入使用者名稱後，把游標移動到其他表單項上時，瀏覽器會使用AJAX技術向伺服器發出請求，伺服器會查詢名為zhangSan的使用者是否存在，最終伺服器返回true表示名為lemontree7777777的使用者已經存在了，瀏覽器在得到結果後顯示“使用者名稱已被註冊！”。
- 整個過程中頁面沒有重新整理，只是區域性重新整理了；
- 在請求發出後，瀏覽器不用等待伺服器響應結果就可以進行其他操作；
3、ajax的優點，，特點也就是優點。。
優點：
- AJAX使用Javascript技術向伺服器傳送非同步請求；
- AJAX無須重新整理整個頁面；
- 因為伺服器響應內容不再是整個頁面，而是頁面中的區域性，所以AJAX效能高；
四、jQuery實現的ajax
tishi.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<a href="/get_OK/">點選</a><span class="error"></span>
<hr>
<p>姓名<input type="text"></p>
<p>密碼<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
$(".Ajax_send").click(function () {
// ajax請求
$.ajax({
url:"/tishi_ajax/", //請求路徑
type:"GET", //請求方式
//吧js物件轉成json字串
data:JSON.stringify({
name:$(":text").val(),
pwd:$(":password").val() }), // 請求資料 ，是js資料 ?name=yuan&pwd=123 contentType:"application/json", //告訴伺服器發的是json的格式 success:function (data) { var data=JSON.parse(data); //js中的反序列化 console.log(data); console.log(typeof data); // $(".error").html(data) if(!data["flag"]){ //為False的情況 $(".login_error").html("使用者名稱或者密碼錯誤") } } }) }) </script> </body> </html>
view
def tishi_ajax(request):
username=request.GET.get("name")
password=request.GET.get("pwd")
response={"flag":False}
if username=="yuan" and password=="123":
response["flag"]=True import json import time return HttpResponse(json.dumps(response)) def tishi(request): return render(request,"tishi.html")
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>
<button class="send_Ajax">send_Ajax</button>
<script>
//$.ajax的兩種使用方式:
//$.ajax(settings);
//$.ajax(url,[settings]);
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123}, //==================成功的時候要執行的程式碼================== success:function(data){ alert(data) }, //=================== error的時候要執行的程式碼============ error: function (jqXHR, textStatus, err) { // jqXHR: jQuery增強的xhr // textStatus: 請求完成狀態 // err: 底層通過throw丟擲的異常物件，值與錯誤型別有關 console.log(arguments); }, //=================== complete（無論成功還是失敗，都要執行的程式碼）============ complete: function (jqXHR, textStatus) { // jqXHR: jQuery增強的xhr // textStatus: 請求完成狀態 success | error console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText); console.log('textStatus: %s', textStatus); }, //=================== statusCode============ statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); //注意：後端模擬errror方式：HttpResponse.status_code=500 }, '400': function () { } } }) }) </script> </body> </html>
五、ajax引數
請求引數
######################------------data---------################
data: 當前ajax請求要攜帶的資料，是一個json的object物件，ajax方法就會預設地把它編碼成某種格式
(urlencoded:?a=1&b=2)傳送給服務端；此外，ajax預設以get方式傳送請求。
function testData() {
$.ajax("/test",{ //此時的data是一個json形式的物件
data:{
a:1,
b:2
}
}); //?a=1&b=2
######################------------processData---------################
processData：聲明當前的data資料是否進行轉碼或預處理，預設為true，即預處理；if為false， 那麼對data：{a:1,b:2}會呼叫json物件的toString()方法，即{a:1,b:2}.toString() ,最後得到一個［object，Object］形式的結果。 ######################------------contentType---------################ contentType：預設值: "application/x-www-form-urlencoded"。傳送資訊至伺服器時內容編碼型別。 用來指明當前請求的資料編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交資料， 比如contentType:"application/json"，即向伺服器傳送一個json字串： $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 注意：contentType:"application/json"一旦設定，data必須是json字串，不能是json物件 ######################------------traditional---------################ traditional：一般是我們的data資料有陣列時會用到 ：data:{a:22,b:33,c:["x","y"]}, traditional為false會對資料進行深層次迭代；
響應引數
/*
dataType： 預期伺服器返回的資料型別,伺服器端返回的資料會根據這個值解析後，傳遞給回撥函式。
預設不需要顯性指定這個屬性，ajax會根據伺服器返回的content Type來進行轉換；
比如我們的伺服器響應的content Type為json格式，這時ajax方法就會對響應的內容
進行一個json格式的轉換，if轉換成功，我們在success的回撥函式裡就會得到一個json格式
的物件；轉換失敗就會觸發error這個回撥函式。如果我們明確地指定目標型別，就可以使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
見下dataType例項
*/
示例：
1 from django.shortcuts import render,HttpResponse
2 from django.views.decorators.csrf import csrf_exempt
3 # Create your views here.
4
5 import json
6
7 def login(request):
8
9 return render(request,'Ajax.html') 10 11 12 def ajax_get(request): 13 14 l=['alex','little alex'] 15 dic={"name":"alex","pwd":123} 16 17 #return HttpResponse(l) #元素直接轉成字串alexlittle alex 18 #return HttpResponse(dic) #字典的鍵直接轉成字串namepwd 19 return HttpResponse(json.dumps(l)) 20 return HttpResponse(json.dumps(dic))# 傳到前端的是json字串,要想使用,需要JSON.parse(data) 21 22 //--------------------------------------------------- 23 function testData() { 24 25 $.ajax('ajax_get', { 26 success: function (data) { 27 console.log(data); 28 console.log(typeof(data)); 29 //console.log(data.name); 30 //JSON.parse(data); 31 //console.log(data.name); 32 }, 33 //dataType:"json", 34 } 35 )} 36 37 註解:Response Headers的content Type為text/html,所以返回的是String;但如果我們想要一個json物件 38 設定dataType:"json"即可,相當於告訴ajax方法把伺服器返回的資料轉成json物件傳送到前端.結果為object 39 當然， 40 return HttpResponse(json.dumps(a),content_type="application/json") 41 42 這樣就不需要設定dataType:"json"了。 43 content_type="application/json"和content_type="json"是一樣的！
一、Ajax準備知識：json
說起json，我們大家都瞭解，就是python中的json模組，那麼json模組具體是什麼呢？那我們現在詳細的來說明一下
1、json(Javascript Obiect Notation,JS物件標記)是一種輕量級的資料交換格式。
它基於 ECMAScript (w3c制定的js規範)的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。
簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。
2、json其實是從js中拿出來的一個物件，也可以說json是js的一個子集。
需要知道的：json的格式來源於js的格式
1、js支援單引號，也支援雙引號，也可以沒有引號
//在js中吧{}這樣的型別叫做物件，js中沒有字典一說
data = {
'name':'haiyan',
"name":"haiyan",
name:"haiyan"
} //js物件預設會把自己的鍵當成字串處理，所以可以加引號也可以不加
2、json的格式：
1、json只認雙引號的
2、json一定是一個字串
3、下面我們看看哪些是合格的字串，那些不是？
合格的json物件：
1 ["one", "two", "three"]
2
3 { "one": 1, "two": 2, "three": 3 }
4
5 {"names": ["張三", "李四"] }
6
7 [ { "name": "張三"}, {"name": "李四"} ]
不合格的json物件：
1 { name: "張三", 'age': 32 } // 屬性名必須使用雙引號
2
3 [32, 64, 128, 0xFFF] // 不能使用十六進位制值
4
5 { "name": "張三", "age": undefined } // 不能使用undefined
6
7 { "name": "張三",
8 "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
9 "getName": function() {return this.name;} // 不能使用函式和日期物件 10 }
+++++++++++++++python中的序列化(dumps)與反序列化(loads)++++++++++++++
import json
i = 10
s = "dsfdsf"
l = [11,22,33]
dic = {"name":"haiyna","age":22}
b = True # #吧基本資料型別轉換成字串的形式 print(json.dumps(i),type(json.dumps(i))) #10 <class 'str'> print(json.dumps(s),type(json.dumps(s))) #"dsfdsf" <class 'str'> print(json.dumps(l),type(json.dumps(l))) #[11, 22, 33] <class 'str'> print(json.dumps(dic),type(json.dumps(dic))) #{"name": "haiyna", "age": 22} <class 'str'> print(json.dumps(b),type(json.dumps(b))) #true <class 'str'> # ===============json反序列化============= d = {"a":1,"b":"fdgfd"} data = json.dumps(d) print(data,type(data)) f = open("a.txt","w") f.write(data) #注意這會寫進去的字串時雙引號的格式 f.close() # ===============json序列化============= f = open("a.txt","r") datat = f.read() print(datat,type(datat)) #{"a": 1, "b": "fdgfd"} <class 'str'> data = json.loads(datat) print(data,type(data)) #{'a': 1, 'b': 'fdgfd'} <class 'dict'>
+++++++++++++++JS中的序列化(stringify)與反序列化(parse)++++++++++++++++++
JSON.stringify():用於將一個JavaScript物件轉換為JSON字串
JSON.parse():用於將一個JSON字串轉換為JavaScript物件
<script>
//===========js中的json序列化===========
s = '{"name":1}';
var data = JSON.parse(s);
console.log(data);
console.log(typeof data); //object
//===========js中的json的反序列化=======
s2={'name':'yuan'};
console.log(JSON.stringify(s2),typeof JSON.stringify(s2)) //string
</script>
二、JSON和XML的比較
1、XML也是存資料的一種格式，也是一種標記語言。它是利用節點進行查詢的
2、JSON 格式於2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。
JSON 格式有兩個顯著的優點：書寫簡單，一目瞭然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外新增解析程式碼。所以，JSON迅速被接受，已經成為各大網站交換資料的標準格式，並被寫入ECMAScript 5，成為標準的一部分。
XML和JSON都使用結構化方法來標記資料，下面來做一個簡單的比較。
用XML表示中國部分省市資料如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <country> 3 <name>中國</name> 4 <province> 5 <name>黑龍江</name> 6 <cities> 7 <city>哈爾濱</city> 8 <city>大慶</city> 9 </cities> 10 </province> 11 <province> 12 <name>廣東</name> 13 <cities> 14 <city>廣州</city> 15 <city>深圳</city> 16 <city>珠海</city> 17 </cities> 18 </province> 19 <province> 20 <name>臺灣</name> 21 <cities> 22 <city>臺北</city> 23 <city>高雄</city> 24 </cities> 25 </province> 26 <province> 27 <name>新疆</name> 28 <cities> 29 <city>烏魯木齊</city> 30 </cities> 31 </province> 32 </country>
用JSON表示如下：
1 {
2 "name": "中國",
3 "province": [{
4 "name": "黑龍江",
5 "cities": {
6 "city": ["哈爾濱", "大慶"] 7 } 8 }, { 9 "name": "廣東", 10 "cities": { 11 "city": ["廣州", "深圳", "珠海"] 12 } 13 }, { 14 "name": "臺灣", 15 "cities": { 16 "city": ["臺北", "高雄"] 17 } 18 }, { 19 "name": "新疆", 20 "cities": { 21 "city": ["烏魯木齊"] 22 } 23 }] 24 }
可以看到，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，並且在資料交換方面，由於 JSON 所使用的字元要比 XML 少得多，可以大大得節約傳輸資料所佔用得頻寬。
注意：
JSON格式取代了xml給網路傳輸帶來了很大的便利,但是卻沒有了xml的一目瞭然,尤其是json資料很長的時候,我們會陷入繁瑣複雜的資料節點查詢中。 但是國人的一款線上工具 BeJson 、SoJson線上工具讓眾多程式設計師、新接觸JSON格式的程式設計師更快的瞭解JSON的結構，更快的精確定位JSON格式錯誤。三、Ajax簡介
1、簡單介紹
我們以前知道的前端向後端傳送資料的方式有：
GET：位址列、a標籤、Form表單
POST：Form表單
那麼現在我們在學習一種：那就是ajax
ajax：也是前端向後端傳送資料的一種方式
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（當然，傳輸的資料不只是XML）。
- 同步互動：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
- 非同步互動：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。
Ajax的特點：
非同步互動： 當請求發出後，瀏覽器還可以進行其他操作，無需等待伺服器的響應！
區域性重新整理： 整個過程中頁面沒有重新整理，只是重新整理頁面中的區域性位置而已！
js的區域性重新整理：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 .error{
9 color:red
10 }
11 </style>
12 </head>
13 <body>
14
15
16 <form class="Form">
17
18 <p>姓名 <input class="v1" type="text" name="username" mark="使用者名稱"></p>
19 <p>密碼 <input class="v1" type="text" name="email" mark="郵箱"></p>
20 <p><input type="submit" value="submit"></p>
21
22 </form>
23
24 <script src="jquery-3.1.1.js"></script>
25
26 <script>
27
28 $(".Form :submit").click(function(){
29
30 flag=true;
31
32 $("Form .v1").each(function(){ 33 34 var value=$(this).val(); 35 if (value.trim().length==0){ 36 var mark=$(this).attr("mark"); 37 var $span=$("<span>"); 38 $span.html(mark+"不能為空!"); 39 $span.prop("class","error"); 40 $(this).after($span); 41 42 setTimeout(function(){ 43 $span.remove(); 44 },800); 45 46 flag=false; 47 return flag; 48 49 } 50 }); 51 return flag 52 }); 53 54 55 </script> 56 57 58 </body> 59 </html>
2、ajax的建立應用場景
當我們在百度中輸入一個“老”字後，會馬上出現一個下拉列表！列表中顯示的是包含“老”字的4個關鍵字。
其實這裡就使用了AJAX技術！當檔案框發生了輸入變化時，瀏覽器會使用AJAX技術向伺服器傳送一個請求，查詢包含“老”字的前10個關鍵字，然後伺服器會把查詢到的結果響應給瀏覽器，最後瀏覽器把這4個關鍵字顯示在下拉列表中。
- 整個過程中頁面沒有重新整理，只是重新整理頁面中的區域性位置而已！
- 當請求發出後，瀏覽器還可以進行其他操作，無需等待伺服器的響應！
當輸入使用者名稱後，把游標移動到其他表單項上時，瀏覽器會使用AJAX技術向伺服器發出請求，伺服器會查詢名為zhangSan的使用者是否存在，最終伺服器返回true表示名為lemontree7777777的使用者已經存在了，瀏覽器在得到結果後顯示“使用者名稱已被註冊！”。
- 整個過程中頁面沒有重新整理，只是區域性重新整理了；
- 在請求發出後，瀏覽器不用等待伺服器響應結果就可以進行其他操作；
3、ajax的優點，，特點也就是優點。。
優點：
- AJAX使用Javascript技術向伺服器傳送非同步請求；
- AJAX無須重新整理整個頁面；
- 因為伺服器響應內容不再是整個頁面，而是頁面中的區域性，所以AJAX效能高；
四、jQuery實現的ajax
tishi.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<a href="/get_OK/">點選</a><span class="error"></span>
<hr>
<p>姓名<input type="text"></p>
<p>密碼<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
$(".Ajax_send").click(function () {
// ajax請求
$.ajax({
url:"/tishi_ajax/", //請求路徑
type:"GET", //請求方式
//吧js物件轉成json字串
data:JSON.stringify({
name:$(":text").val(),
pwd:$(":password").val() }), // 請求資料 ，是js資料 ?name=yuan&pwd=123 contentType:"application/json", //告訴伺服器發的是json的格式 success:function (data) { var data=JSON.parse(data); //js中的反序列化 console.log(data); console.log(typeof data); // $(".error").html(data) if(!data["flag"]){ //為False的情況 $(".login_error").html("使用者名稱或者密碼錯誤") } } }) }) </script> </body> </html>
view
def tishi_ajax(request):
username=request.GET.get("name")
password=request.GET.get("pwd")
response={"flag":False}
if username=="yuan" and password=="123":
response["flag"]=True import json import time return HttpResponse(json.dumps(response)) def tishi(request): return render(request,"tishi.html")
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>
<button class="send_Ajax">send_Ajax</button>
<script>
//$.ajax的兩種使用方式:
//$.ajax(settings);
//$.ajax(url,[settings]);
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123}, //==================成功的時候要執行的程式碼================== success:function(data){ alert(data) }, //=================== error的時候要執行的程式碼============ error: function (jqXHR, textStatus, err) { // jqXHR: jQuery增強的xhr // textStatus: 請求完成狀態 // err: 底層通過throw丟擲的異常物件，值與錯誤型別有關 console.log(arguments); }, //=================== complete（無論成功還是失敗，都要執行的程式碼）============ complete: function (jqXHR, textStatus) { // jqXHR: jQuery增強的xhr // textStatus: 請求完成狀態 success | error console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText); console.log('textStatus: %s', textStatus); }, //=================== statusCode============ statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); //注意：後端模擬errror方式：HttpResponse.status_code=500 }, '400': function () { } } }) }) </script> </body> </html>
五、ajax引數
請求引數
######################------------data---------################
data: 當前ajax請求要攜帶的資料，是一個json的object物件，ajax方法就會預設地把它編碼成某種格式
(urlencoded:?a=1&b=2)傳送給服務端；此外，ajax預設以get方式傳送請求。
function testData() {
$.ajax("/test",{ //此時的data是一個json形式的物件
data:{
a:1,
b:2
}
}); //?a=1&b=2
######################------------processData---------################
processData：聲明當前的data資料是否進行轉碼或預處理，預設為true，即預處理；if為false， 那麼對data：{a:1,b:2}會呼叫json物件的toString()方法，即{a:1,b:2}.toString() ,最後得到一個［object，Object］形式的結果。 ######################------------contentType---------################ contentType：預設值: "application/x-www-form-urlencoded"。傳送資訊至伺服器時內容編碼型別。 用來指明當前請求的資料編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交資料， 比如contentType:"application/json"，即向伺服器傳送一個json字串： $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 注意：contentType:"application/json"一旦設定，data必須是json字串，不能是json物件 ######################------------traditional---------################ traditional：一般是我們的data資料有陣列時會用到 ：data:{a:22,b:33,c:["x","y"]}, traditional為false會對資料進行深層次迭代；
響應引數
/*
dataType： 預期伺服器返回的資料型別,伺服器端返回的資料會根據這個值解析後，傳遞給回撥函式。
預設不需要顯性指定這個屬性，ajax會根據伺服器返回的content Type來進行轉換；
比如我們的伺服器響應的content Type為json格式，這時ajax方法就會對響應的內容
進行一個json格式的轉換，if轉換成功，我們在success的回撥函式裡就會得到一個json格式
的物件；轉換失敗就會觸發error這個回撥函式。如果我們明確地指定目標型別，就可以使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
見下dataType例項
*/
示例：
1 from django.shortcuts import render,HttpResponse
2 from django.views.decorators.csrf import csrf_exempt
3 # Create your views here.
4
5 import json
6
7 def login(request):
8
9 return render(request,'Ajax.html') 10 11 12 def ajax_get(request): 13 14 l=['alex','little alex'] 15 dic={"name":"alex","pwd":123} 16 17 #return HttpResponse(l) #元素直接轉成字串alexlittle alex 18 #return HttpResponse(dic) #字典的鍵直接轉成字串namepwd 19 return HttpResponse(json.dumps(l)) 20 return HttpResponse(json.dumps(dic))# 傳到前端的是json字串,要想使用,需要JSON.parse(data) 21 22 //--------------------------------------------------- 23 function testData() { 24 25 $.ajax('ajax_get', { 26 success: function (data) { 27 console.log(data); 28 console.log(typeof(data)); 29 //console.log(data.name); 30 //JSON.parse(data); 31 //console.log(data.name); 32 }, 33 //dataType:"json", 34 } 35 )} 36 37 註解:Response Headers的content Type為text/html,所以返回的是String;但如果我們想要一個json物件 38 設定dataType:"json"即可,相當於告訴ajax方法把伺服器返回的資料轉成json物件傳送到前端.結果為object 39 當然， 40 return HttpResponse(json.dumps(a),content_type="application/json") 41 42 這樣就不需要設定dataType:"json"了。 43 content_type="application/json"和content_type="json"是一樣的！