當前位置：首頁 >

day18--django3之Ajax

發布時間：2024/4/15 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 day18--django3之Ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

差了很多博客了，慢慢補。

苑昊老師博客：http://www.cnblogs.com/yuanchenqi/articles/7429279.html

Django-3

知識預覽

Ajax前戲：json
Ajax簡介
jquery實現的ajax
JS實現的ajax

回到頂部

Ajax前戲：json

什么是json？

定義：

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。
它基于 ECMAScript (w3c制定的js規范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。
簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。

講json對象，不得不提到JS對象：

合格的json對象：

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]

?不合格的json對象：

{ name: "張三", 'age': 32 } // 屬性名必須使用雙引號

[32, 64, 128, 0xFFF] // 不能使用十六進制值

{ "name": "張三", "age": undefined } // 不能使用undefined

{ "name": "張三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函數和日期對象
}

stringify與parse方法

JSON.parse(): 用于將一個 JSON 字符串轉換為 JavaScript 對象　 eg: console.log(JSON.parse('{"name":"Yuan"}')); console.log(JSON.parse('{name:"Yuan"}')) ; // 錯誤 console.log(JSON.parse('[12,undefined]')) ; // 錯誤JSON.stringify(): 用于將 JavaScript 值轉換為 JSON 字符串。　 eg: console.log(JSON.stringify({'name':"egon"})) ;

和XML的比較

JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。

JSON 格式有兩個顯著的優點：書寫簡單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經成為各大網站交換數據的標準格式，并被寫入ECMAScript 5，成為標準的一部分。

XML和JSON都使用結構化方法來標記數據，下面來做一個簡單的比較。

用XML表示中國部分省市數據如下：

<?xml version="1.0"?encoding="utf-8"?> <country> ????<name>中國</name> ????<province> ????????<name>黑龍江</name> ????????<cities> ????????????<city>哈爾濱</city> ????????????<city>大慶</city> ????????</cities> ????</province> ????<province> ????????<name>廣東</name> ????????<cities> ????????????<city>廣州</city> ????????????<city>深圳</city> ????????????<city>珠海</city> ????????</cities> ????</province> ????<province> ????????<name>臺灣</name> ????????<cities> ????????????<city>臺北</city> ????????????<city>高雄</city> ????????</cities> ????</province> ????<province> ????????<name>新疆</name> ????????<cities> ????????????<city>烏魯木齊</city> ????????</cities> ????</province> </country>

用JSON表示如下：

{ ????"name":?"中國", ????"province": [{ ????????"name":?"黑龍江", ????????"cities": { ????????????"city": ["哈爾濱",?"大慶"] ????????} ????}, { ????????"name":?"廣東", ????????"cities": { ????????????"city": ["廣州",?"深圳",?"珠海"] ????????} ????}, { ????????"name":?"臺灣", ????????"cities": { ????????????"city": ["臺北",?"高雄"] ????????} ????}, { ????????"name":?"新疆", ????????"cities": { ????????????"city": ["烏魯木齊"] ????????} ????}] }

　　可以看到，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，并且在數據交換方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節約傳輸數據所占用得帶寬。

注意：

JSON格式取代了xml給網絡傳輸帶來了很大的便利,但是卻沒有了xml的一目了然,尤其是json數據很長的時候,我們會陷入繁瑣復雜的數據節點查找中。但是國人的一款在線工具 BeJson 、SoJson在線工具讓眾多程序員、新接觸JSON格式的程序員更快的了解JSON的結構，更快的精確定位JSON格式錯誤。

數據交換

def login(request):obj={'name':"alex111"}return render(request,'index.html',{"objs":json.dumps(obj)}) #----------------------------------<script>var temp={{ objs|safe }}alert(temp.name);alert(temp['name'])</script>

如果要通過js或者jquery給后端發送數據，那么就要用到我們下面的Ajax啦

回到頂部

Ajax簡介

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。

同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）

js實現的局部刷新:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</form>

$(".Form :submit").click(function(){

flag=true;

$("Form .v1").each(function(){

var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var $span=$("<span>");
$span.html(mark+"不能為空!");
$span.prop("class","error");
$(this).after($span);

setTimeout(function(){
$span.remove();
},800);

flag=false;
return flag;

}
});
return flag
});

</script>

</body>
</html>

AJAX常見應用情景

當我們在百度中輸入一個“老”字后，會馬上出現一個下拉列表！列表中顯示的是包含“傳”字的4個關鍵字。

其實這里就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含“傳”字的前10個關鍵字，然后服務器會把查詢到的結果響應給瀏覽器，最后瀏覽器把這4個關鍵字顯示在下拉列表中。

整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！

? ? ? ?

當輸入用戶名后，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名為zhangSan的用戶是否存在，最終服務器返回true表示名為lemontree7777777的用戶已經存在了，瀏覽器在得到結果后顯示“用戶名已被注冊！”。

整個過程中頁面沒有刷新，只是局部刷新了；
在請求發出后，瀏覽器不用等待服務器響應結果就可以進行其他操作；

AJAX的優缺點

優點：

AJAX使用Javascript技術向服務器發送異步請求；
AJAX無須刷新整個頁面；
因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；

缺點：

AJAX并不適合所有場景，很多時候還是要使用同步交互；
AJAX雖然提高了用戶體驗，但無形中向服務器發送的請求次數增多了，導致服務器壓力增大；
因為AJAX是在瀏覽器中使用Javascript技術完成的，所以還需要處理瀏覽器兼容性問題；

一言以蔽之：不會Ajax，搞什么web，玩什么爬蟲！

回到頂部

jquery實現的ajax

{% 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 | errorconsole.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>

import json

def index(request):

return render(request,"index.html")

def handle_Ajax(request):

username=request.POST.get("username")
password=request.POST.get("password")

print(username,password)

return HttpResponse(json.dumps("Error Data!"))

views

$.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實例*/

示例：

from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.

import json

def login(request):

return render(request,'Ajax.html')

def ajax_get(request):

l=['alex','little alex']
dic={"name":"alex","pwd":123}

#return HttpResponse(l) #元素直接轉成字符串alexlittle alex
#return HttpResponse(dic) #字典的鍵直接轉成字符串namepwd
return HttpResponse(json.dumps(l))
return HttpResponse(json.dumps(dic))# 傳到前端的是json字符串,要想使用,需要JSON.parse(data)

//---------------------------------------------------
function testData() {

$.ajax('ajax_get', {
success: function (data) {
console.log(data);
console.log(typeof(data));
//console.log(data.name);
//JSON.parse(data);
//console.log(data.name);
},
//dataType:"json",
}
)}

注解:Response Headers的content Type為text/html,所以返回的是String;但如果我們想要一個json對象
設定dataType:"json"即可,相當于告訴ajax方法把服務器返回的數據轉成json對象發送到前端.結果為object
當然，
return HttpResponse(json.dumps(a),content_type="application/json")

這樣就不需要設定dataType:"json"了。
content_type="application/json"和content_type="json"是一樣的！

csrf跨站請求偽造

1 2 3

$.ajaxSetup({ ????data: {csrfmiddlewaretoken:?'{{ csrf_token }}'?}, });

回到頂部

JS實現的ajax

AJAX核心（XMLHttpRequest）

????? 其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的。也就是說，我們只需要學習一個Javascript的新對象即可。

1	var?xmlHttp =?new?XMLHttpRequest()；（大多數瀏覽器都支持DOM2規范）

注意，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題，給出下面方法來創建XMLHttpRequest對象：

使用流程

步驟1: ?打開與服務器的連接（open方法）

當得到XMLHttpRequest對象后，就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下：

open(method, url, async)：

method：請求方式，通常為GET或POST；
url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL后追加參數；
async：這個參數可以不給，默認值為true，表示異步請求；

1 2	var?xmlHttp = createXMLHttpRequest(); xmlHttp.open("GET",?"/ajax_get/",?true);

步驟2: ?發送請求

當使用open打開連接后，就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL后連接參數。

注意：若沒有參數，需要給出null為參數！若不給出null為參數，可能會導致FireFox瀏覽器不能正常發送請求！

1	xmlHttp.send(null);

步驟3: ?接收服務器響應

當請求發送出去后，服務器端Servlet就開始執行了，但服務器端的響應還沒有接收到。接下來我們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：

0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法；
1：請求已開始，open()方法已調用，但還沒調用send()方法；
2：請求發送完成狀態，send()方法已調用；
3：開始讀取服務器響應；
4：讀取服務器響應結束。?

onreadystatechange事件會在狀態為1、2、3、4時引發。

　　下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！

xmlHttp.onreadystatechange = function() {alert('hello');};

但通常我們只關心最后一種狀態，即讀取服務器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4) {alert('hello'); }};

其實我們還要關心服務器響應的狀態碼是否為200，其服務器響應為404，或500，那么就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態碼。

最后，我們還需要獲取到服務器響應的內容，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。

xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {alert(xmlHttp.responseText); }};

?if 發送POST請求

<1>需要設置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；

??????????? 注意 :form表單會默認這個鍵值對;不設定，Web服務器會忽略請求體的內容。

<2>在發送時可以指定請求體了：xmlHttp.send(“username=yuan&password=123”)

JS實現ajax小結

/*創建XMLHttpRequest對象；調用open()方法打開與服務器的連接；調用send()方法發送請求；為XMLHttpRequest對象指定onreadystatechange事件函數，這個函數會在XMLHttpRequest的1、2、3、4，四種狀態時被調用；XMLHttpRequest對象的5種狀態，通常我們只關心4狀態。XMLHttpRequest對象的status屬性表示服務器狀態碼，它只有在readyState為4時才能獲取到。XMLHttpRequest對象的responseText屬性表示服務器響應內容，它只有在readyState為4時才能獲取到！*/

測試代碼：

function send() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var div = document.getElementById("div1");
div.innerText = xmlHttp.responseText;
div.textContent = xmlHttp.responseText;
}
};

xmlHttp.open("POST", "/ajax_post/", true);
//post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null); //post: xmlHttp.send("b=B");
}

</script>

#--------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
print('hello ajax')
return render(request,'index.html')

@csrf_exempt ＃csrf防御
def ajax_post(request):
print('ok')
return HttpResponse('helloyuanhao')

實例（用戶名是否已被注冊）

7.1　功能介紹

在注冊表單中，當用戶填寫了用戶名后，把光標移開后，會自動向服務器發送異步請求。服務器返回true或false，返回true表示這個用戶名已經被注冊過，返回false表示沒有注冊過。

客戶端得到服務器返回的結果后，確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息！

7.2　案例分析

頁面中給出注冊表單；
在username表單字段中添加onblur事件，調用send()方法；
send()方法獲取username表單字段的內容，向服務器發送異步請求，參數為username；
django 的視圖函數：獲取username參數，判斷是否為“yuan”，如果是響應true，否則響應false

參考代碼：

1 <script type="text/javascript"> 2 function createXMLHttpRequest() { 3 try { 4 return new XMLHttpRequest(); 5 } catch (e) { 6 try { 7 return new ActiveXObject("Msxml2.XMLHTTP"); 8 } catch (e) { 9 return new ActiveXObject("Microsoft.XMLHTTP"); 10 } 11 } 12 } 13 14 function send() { 15 var xmlHttp = createXMLHttpRequest(); 16 xmlHttp.onreadystatechange = function() { 17 if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { 18 if(xmlHttp.responseText == "true") { 19 document.getElementById("error").innerText = "用戶名已被注冊！"; 20 document.getElementById("error").textContent = "用戶名已被注冊！"; 21 } else { 22 document.getElementById("error").innerText = ""; 23 document.getElementById("error").textContent = ""; 24 } 25 } 26 }; 27 xmlHttp.open("POST", "/ajax_check/", true, "json"); 28 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 29 var username = document.getElementById("username").value; 30 xmlHttp.send("username=" + username); 31 } 32 </script> 33 34 //--------------------------------------------------index.html 35 36 <h1>注冊</h1> 37 <form action="" method="post"> 38 用戶名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/> 39 密　碼：<input type="text" name="password"/><br/> 40 <input type="submit" value="注冊"/> 41 </form> 42 43 44 //--------------------------------------------------views.py 45 from django.views.decorators.csrf import csrf_exempt 46 47 def login(request): 48 print('hello ajax') 49 return render(request,'index.html') 50 # return HttpResponse('helloyuanhao') 51 52 @csrf_exempt 53 def ajax_check(request): 54 print('ok') 55 56 username=request.POST.get('username',None) 57 if username=='yuan': 58 return HttpResponse('true') 59 return HttpResponse('false')

轉載于:https://www.cnblogs.com/jinxj/p/7449888.html

總結

以上是生活随笔為你收集整理的day18--django3之Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ajax

上一篇： Beanutils-No origin
下一篇：高效开发iOS

day18--django3之Ajax

Django-3

Ajax前戲：json

什么是json？

stringify與parse方法

和XML的比較

數據交換

Ajax簡介

AJAX常見應用情景

AJAX的優缺點

優點：

缺點：

jquery實現的ajax

$.ajax參數

請求參數

響應參數

csrf跨站請求偽造

JS實現的ajax

AJAX核心（XMLHttpRequest）

使用流程

步驟1: ?打開與服務器的連接（open方法）

步驟2: ?發送請求

步驟3: ?接收服務器響應

?if 發送POST請求

JS實現ajax小結

實例（用戶名是否已被注冊）

7.1 功能介紹

7.2 案例分析

總結

7.1　功能介紹

7.2　案例分析