Ajax django專案測試
阿新 • • 發佈：2019-09-28
Ajax load方法測試
#解釋說明:load()相當於載入伺服器本地資源內容並將其實現在當前頁面中。
data封賬了載入文本里的內容。
status封裝了載入文字的狀態。
xhr：xml的請求物件。
load('載入的文字','執行的函式')方法接受一個載入的資料物件,和一個載入物件成功失敗的狀態,及xml請求物件。
cat templates/app2/ajax.html
{% load static %}
<!DOCTYPE html>
<!--html5宣告-->
<html lang="en">
<head><meta charset="UTF-8"><title>ajax</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>專案:{{ name }}</p>
<h3 id ='test'>請點選下面按鈕,通過jquery ajax改變這段文字內容</h3>
<button id="button1">傳送load請求</button>
<script>
$(document).ready(function(){
$('#button1').click(function(){
$('#test').load('/static/app2/1.txt',function (data,status,xhr){
if(status=='success'){
$(this).text(data);}
else{
$(this).text('load載入失敗');}
})
})
})
</script>
</body>
</html>
#說明:
給button1新增點選動作在id為test上執行load方法。當點選按鈕時，頁面不重新整理的情況下自動載入1.txt的內容到當前頁面。並會獲取其文字的內容data。和載入成功失敗的狀態status。當狀態為success時將其內容改為文本里面的內容。如果失敗那麼重新給定一個字串load載入失敗。
urls.py與views.py
在static/app2/建立一個文字檔案1.txt 寫入內容:load()相當於載入伺服器本地資源內容。將其實現在頁面中。
啟動服務測試：
---------------------------------------------------------------------------------------------------------------------------------------------------------
Ajax get方法測試
<body>
<p>專案:{{ name }}</p>
<h3 id ='test'>請點選下面按鈕,通過jquery ajax改變這段文字內容</h3>
<button id="button1">傳送load請求</button>
<button id="button2">傳送get請求</button>
views檢視新增
def ajax(request):
import json
content={
'name':'ajax',
'status':'success',
'mesg':'伺服器返回的資料',
}
return HttpResponse(json.dumps(content))
#解釋給button2新增點選動作在id為test上執行get方法。當點選按鈕時,當前頁面不重新整理的情況下向其/app2/ajax頁面發起get請求, function(data,status) data表示後端服返回的資料相當於views.py中的content中的所有的json資料。status指的是後端返回資料中status的值（status是後端伺服器定義的. 上面的load方法是函式本身定義的）.JSON.parse(data).mesg 將後端返回的json資料解析展開以字典的方式獲取mesg的值。如果成功將其賦值給#test標籤。如果失敗。就提賦值get方法失敗。
Ajax post方法測試
<body> <p>專案:{{ name }}</p> <h3 id ='test'>請點選下面按鈕,通過jquery ajax改變這段文字內容</h3> <from> <input name="username"/> </from> <button id="button1">傳送load請求</button> <button id="button2">傳送get請求</button> <button id="button3">傳送post請求</button> <script> $(document).ready(function(){ $('#button1').click(function(){ $('#test').load('/static/app2/1.txt',function (data,status,xhr){ if(status=='success'){ $(this).text(data);} else{ $(this).text('load載入失敗');} }) }) $('#button2').click(function(){ $.get( '/app2/ajax', {'type':'get'}, function(data,status){ if(status=='success'){ $('#test').text(JSON.parse(data).mesg); }else{ $('#test').text('get請求失敗'); } } ) }) $('#button3').click(function(){ var data=$('input').val();/*獲取標籤的值*/ //alert(data); $.post( '/app2/ajax', {'type':'post','data':data}, function(data,status){ if(status=='success'){ $('#test').text(JSON.parse(data).mesg); }else{ $('#test').text('post請求失敗'); } } ) }) }) </script> <!-----------Ddjango 使用了jquery實現表單提交時,解決crsf驗證問題只需要在頁面新增一下程式碼即可--------------> <script> // using jQuery function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // 這些HTTP方法不要求CSRF包含 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); </script> </body>
#注意:post提交表單如果使用了jquery方式，需要在其表單元素內部新增csrf_token標籤。由於使用了jquery方式所以這裡使用官方的程式碼解決。
<!-----------Ddjango 使用了jquery實現表單提交時,解決crsf驗證問題只需要在頁面新增一下程式碼即可-------------->
<script>
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// 這些HTTP方法不要求CSRF包含
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
post方法和get方法解釋類似。這裡不再贅述
使用原始的ajax的post方法:
