當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Django学习---原生ajax

發布時間：2023/12/2 编程问答 31 豆豆

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

Ajax

原生ajax

Ajax主要就是使用【XmlHttpRequest】對象來完成請求的操作，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。

XmlHttpRequest對象的主要方法：

a. void open(String method,String url,Boolen async)用于創建請求參數：method：請求方式（字符串類型），如：POST、GET、DELETE...url：要請求的地址（字符串類型）async：是否異步（布爾類型）b. void send(String body)用于發送請求參數：body：要發送的數據（字符串類型）c. void setRequestHeader(String header,String value)用于設置請求頭，可以用在做csrf驗證上main參數：header：請求頭的key（字符串類型）vlaue：請求頭的value（字符串類型）d. String getAllResponseHeaders()獲取所有響應頭返回值：響應頭數據（字符串類型）e. String getResponseHeader(String header)獲取響應頭中指定header的值參數：header：響應頭的key（字符串類型）返回值：響應頭中指定的header對應的值f. void abort()終止請求

XmlHttpRequest對象的主要屬性：

a. Number readyState狀態值（整數）詳細：0-未初始化，尚未調用open()方法；1-啟動，調用了open()方法，未調用send()方法；2-發送，已經調用了send()方法，未接收到響應；3-接收，已經接收到部分響應數據；4-完成，已經接收到全部響應數據；b. Function onreadystatechange當readyState的值改變時自動觸發執行其對應的函數（回調函數）c. String responseText服務器返回的數據（字符串類型）d. XmlDocument responseXML服務器返回的數據（Xml對象）e. Number states服務端返回的狀態碼（整數），如：200、404...f. String statesText狀態碼對應的狀態文本（字符串），如：OK、NotFound...

?xmlhttpresponse發送原生的ajax案例：(GET方式)

views.py:

def ajax(request):return render(request,'ajax.html') def ajax_json(request):import jsonret = {'status':True,'data':None}return HttpResponse(json.dumps(ret))

ajax.html:

<input type="text"><input type="button" value="Ajax1" onclick="Ajax1();"><script>function Ajax1(){var xhr = new XMLHttpRequest();xhr.open('GET','/ajax_json/',true);xhr.onreadystatechange = function(){if(xhr.readyState == 4){//執行完畢console.log(xhr.responseText);}}xhr.send("name=root;pwd=123");}</script>

之后我們點擊按鈕，在console上就可以看到返回的數據

?xmlhttpresponse發送原生的ajax案例：(POST方式)

那如果用上述方法發送的話肯定是收不到post數據的，需要給它加上一個請求頭：

解決兼容性問題：

function getXHR(){var xhr = null;if(XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;}

?jquery ajax：

jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject?

<p><input type="button" onclick="XmlSendRequest();" value='Ajax請求' /> </p><script type="text/javascript" src="jquery-1.12.4.js"></script><script>function JqSendRequest(){$.ajax({url: "http://c2.com:8000/test/",type: 'GET',dataType: 'text',success: function(data, statusText, xmlHttpRequest){console.log(data);}})}

“偽”AJAX

?首先我們來看一個例子：

<input type="text" id="url"> <input type="button" value="發送iframe請求" onclick="iframeRequest();"> <iframe id="ifm" src="http://www.baidu.com"></iframe><script src="/static/jquery-1.12.4.js"></script><script>function iframeRequest() {var url = $('#url').val()$('#ifm').attr('src',url)}

當我們在text框中輸入地址，點擊按鈕的時候，就會跳轉到相應的網址。但是此時當我們提交網址的時候我們的頁面是不會刷新的。我們就可以用iframe的這個特點實現一個偽‘ajax’

平常的form提交的時候都需要刷新頁面提交數據，如果我們想要用iframe偽造提交，就可以用到form的一個參數target,設置為iframe的id選擇器名稱就可以了。此時我們的數據就可以發送給后臺

那我們看到返回的數據在iframe中了，我們怎么把這個數據取出來呢？

這里我們可以看到iframe中其實是一個上下文的形式

我們就沒有辦法用jQuery中的innerhtml或者children等進行獲取，那我們還可以知道的是這個數據是在服務端返回的時候才會被傳到iframe中的。對于iframe來說如果有東西返回了，這里面就會有一個onload事件

<form action="/ajax_json/" method="post" target="ifm1"><iframe id="ifm1" name="ifm1"></iframe><input type="text" name="username"><input type="text" name="email"><input type="submit" onclick="submitForm();" value="Form提交"> </form>js代碼： function submitForm() {$('#ifm1').load(function () {var text = $('#ifm1').contents().find('body').text()var obj = JSON.parse(text)}) }

3種方式的選擇時機

?如果發送的是普通的數據，比如用戶填入的值等，直接用jQuery-》XMLHttpRequest-》iframe

?ajax文件上傳

?基于原生的ajax：

upload.html:

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .upload{ 8 display: inline-block; 9 padding: 10px; 10 background-color: coral; 11 position: absolute; 12 top:0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 z-index: 9; 17 border-radius: 8px; 18 text-align: center; 19 } 20 #f1{ 21 width: 75px; 22 height:40px; 23 position: absolute; 24 top:0; 25 bottom: 0; 26 left: 0; 27 right: 0; 28 opacity: 0; 29 z-index: 10; 30 31 } 32 </style> 33 </head> 34 <body> 35 <div style="position: relative;width: 75px;height:40px;"> 36 <input type="file" id="f1" name="uploadFile"> 37 <a class="upload">上傳</a> 38 </div> 39 <input type="submit" value="提交XHR" onclick="xhrSubmit();"> 40 <script src="/static/jquery-1.12.4.js"></script> 41 <script> 42 function xhrSubmit(){ 43 var file_obj=document.getElementById('f1').files[0]; 44 var fd = new FormData(); 45 fd.append('username','root'); 46 fd.append('uploadFile',file_obj); 47 48 var xhr = new XMLHttpRequest(); 49 xhr.open('POST','/upload_file/',true); 50 xhr.onreadystatechange=function(){ 51 if(xhr.readyState == 4){ 52 var obj = JSON.parse(xhr.responseText); 53 console.log(obj) 54 } 55 }; 56 xhr.send(fd) 57 } 58 </script> 59 </body> 60 </html>

views.py

def upload(request):return render(request,'upload.html') def upload_file(request):username = request.POST.get('username')fileName = request.FILES.get('uploadFile')print(username,fileName)with open(fileName.name,'wb') as f:for item in fileName.chunks():f.write(item)import jsonret = {'status': True, 'data': username}return HttpResponse(json.dumps(ret))

?這里要基于FormData類來進行存儲文件，低版本不支持

?基于jQuery：

?在這里我們因為要上傳文件，所以要加上參數processData,contentType這兩個參數。這樣才能運行成功

?基于iframe：（這個兼容性很強）

　　<form action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1"><iframe id="ifm1" name="ifm1" style="display: none"></iframe><input type="file" name="uploadFile"><input type="submit" onclick="iframeSubmit();" value="Form提交"></form><script src="/static/jquery-1.12.4.js"></script><script>function iframeSubmit() {$('#ifm1').load(function () {var text = $('#ifm1').contents().find('body').text()var obj = JSON.parse(text)console.log(obj)})}

?文件預覽：

我們在接受文件的時候，我們可以把文件的url路徑返回去，然后在添加一個div,在里面插入圖片即可：

view.py:

def upload_file(request):username = request.POST.get('username')fileName = request.FILES.get('uploadFile')import osimg_path = os.path.join('static/imgs/',fileName.name)with open(img_path,'wb') as f:for item in fileName.chunks():f.write(item)import jsonret = {'status': True, 'data': img_path}return HttpResponse(json.dumps(ret))

upload.html:

<form action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1"><iframe id="ifm1" name="ifm1" style="display: none"></iframe><input type="file" name="uploadFile" onchange="changeUpload();"><input type="submit" onclick="iframeSubmit();" value="Form提交"></form><div id ="preview" style="width:100px;height:300px;"></div><script src="/static/jquery-1.12.4.js"></script><script>function iframeSubmit() {$('#ifm1').load(function () {var text = $('#ifm1').contents().find('body').text()var obj = JSON.parse(text)$('#preview').empty()var imgTag = document.createElement('img')imgTag.src = '/' obj.data;$('#preview').append(imgTag);})}

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Django学习---原生ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

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

Ajax
django

上一篇： JS对象操作
下一篇： js算法初窥03（搜索及去重算法）