一，Ajax GET請求和POST請求知識點
1，GET請求不用添加 {% csrf_token%} ,也不會報csrftoken的錯
2，POST請求的話，就需要添加 {% csrf_token%} 標簽， 而且要使用$.ajax() 方法，將token傳遞到服務端
3，傳遞過去就行了，后台自動會處理，無需用手工處理這個token
二，以下是代碼示例
以下是index.html代碼示例（里面有使用ajax,GET和POST方法的代碼示例）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>AJAX局部刷新實例</title> 8 </head> 9 <body> 10 <!-- 說明，csrf_token其實就是一個input框 ，類型為"hiddent"即隱藏的，如下注釋的代碼 --> 11 <!-- <input type="hidden" name="csrfmiddlewaretoken" value="IQlJvU6mRj3yKXP5YNV3ABZutgHOa546M04dysyQEBNGJ2euDogA8OX0vyLEiy12"> --> 12 {% csrf_token %} 13 <input type="text" id="i1">+ 14 <input type="text" id="i2">= 15 <input type="text" id="i3"> 16 <input type="button" value="AJAX提交1" id="b1"> 17 <input type="button" value="AJAX提交2" id="b2"> 18 <!-- 本次代碼新增一個按扭 --> 19 <input type="button" id="b3" value="哥達"> 20 <hr> 21 <h1 id="d1">xxxxxxxxxxxx</h1> 22 <!-- 以下是導入JQUERY --> 23 <script src="/static/jquery-3.3.1.js"></script> 24 <!-- 以下是使用jquery版的ajax請求 --> 25 <script> 26 // 添加點擊事件，定義回調函數，當點擊#b1元素時，則執行函數 27 $("#b1").on("click", function () { 28 $.ajax({ 29 url:"/ajax_add/", // 要跳轉到哪里，所以就沒有必要再使用form表單的跳轉和提交了 30 type:"GET", //可以使用POST，或GET都可以 31 data:{"i1":$("#i1").val(),"i2":$("#i2").val()}, //使用jquery獲取DOM元素的值，並傳遞到后端 32 success:function (data) { //發送AJAX請墳成功后，執行回調函數，data則是獲取的后端數據， 33 $("#i3").val(data); //給DOM元素設置值 34 } 35 }) 36 }) 37 // jquery ajax使用 POST方法提交，則必須把CSRF_TOKEN也傳遞到服務器（這樣才是完全和form表單提交的方式一樣） 38 // 如果是使用get方法提交，則就不需要csrf_token, 39 $("#b2").on("click", function () { 40 // 找到頁面上的CSRF_TOKEN，name屬性值應該都一樣， 41 // 使用jquery語法，根據name屬性找到元素，再使用val方法獲取值 42 var csrfToken = $("[name='csrfmiddlewaretoken']").val(); 43 $.ajax({ 44 url:"/ajax_add2/", // 要跳轉到哪里，所以就沒有必要再使用form表單的跳轉和提交了 45 type:"POST", //可以使用POST，或GET都可以 46 //使用jquery獲取DOM元素的值，並傳遞數據到后端 47 data:{"i1":$("#i1").val(),"i2":$("#i2").val(),'csrfmiddlewaretoken':csrfToken}, 48 success:function (data) { //發送AJAX請墳成功后，執行回調函數，data則是獲取的后端數據， 49 $("#i3").val(data); //給DOM元素設置值 50 } 51 }) 52 }) 53 //以下事件是點擊后使用，使用jqurey創建一個IMG標簽，並添加上， 54 $('#b3').on('click',function(){ 55 $.ajax({ 56 // url:'/test/', 57 // type:'get', 58 success:function(a){ 59 //在頁面上創建一個標簽 60 var myimg=$("<img>").attr('src','/static/1.jpg'); 61 $('#d1').append(myimg); 62 } 63 }) 64 }) 65 66 </script> 67 </body> 68 </html>
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/$',views.index), url(r'^ajax_add/$',views.ajax_add), url(r'^ajax_add2/$',views.ajax_add2), ]
# -*- coding: utf-8 -*- from __future__ import unicode_literals from django.shortcuts import render from django.http import HttpResponse # Create your views here. def index(request): return render(request,'index.html') def ajax_add(request): print (request.GET.get('i1')) print (request.GET.get('i2')) i1=int(request.GET.get('i1')) i2=int(request.GET.get('i2')) ret=i1+i2 return HttpResponse(ret) def ajax_add2(request): print (request.POST.get('i1')) print (request.POST.get('i2')) i1=int(request.POST.get('i1')) i2=int(request.POST.get('i2')) ret=i1+i2 return HttpResponse(ret)
三，知識點
1 <!-- 說明，csrf_token其實就是一個input框 ，類型為"hiddent"即隱藏的，如下注釋的代碼 --> 2 <!-- <input type="hidden" name="csrfmiddlewaretoken" value="IQlJvU6mRj3yKXP5YNV3ABZutgHOa546M04dysyQEBNGJ2euDogA8OX0vyLEiy12"> -->
// jquery ajax使用 POST方法提交，則必須把CSRF_TOKEN也傳遞到服務器（這樣才是完全和form表單提交的方式一樣） // 如果是使用get方法提交，則就不需要csrf_token,
四、使用另一種方式，在ajax POST提交的時候，帶上csrf_token
通過獲取返回的cookie中的字符串 放置在請求頭中發送。
注意：需要引入一個jquery.cookie.js插件。
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrf_token，並設置ajax請求頭
data: {"username": "Q1mi", "password": 123456},
success: function (data) {
console.log(data);
}
})
或者用自己寫一個getCookie方法：
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) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
將以上內容放在一個 xxxx.js的文件，然后在ajax提交的html頁面里，引入這個xxx.js文件即可，
然后ajax提交里面，就不需要再獲取csrfToken的值了，也不需要將此值放在data中傳遞給django來處理了。
<script src="/static/xxx.js" ></script>
// jquery ajax使用 POST方法提交，則必須把CSRF_TOKEN也傳遞到服務器（這樣才是完全和form表單提交的方式一樣）
// 如果是使用get方法提交，則就不需要csrf_token,
$("#b2").on("click", function () {
// 找到頁面上的CSRF_TOKEN，name屬性值應該都一樣，
// 使用jquery語法，根據name屬性找到元素，再使用val方法獲取值，這里就不再需要了，
// var csrfToken = $("[name='csrfmiddlewaretoken']").val();
$.ajax({
url:"/ajax_add2/", // 要跳轉到哪里，所以就沒有必要再使用form表單的跳轉和提交了
type:"POST", //可以使用POST，或GET都可以
//使用jquery獲取DOM元素的值，並傳遞數據到后端，這里DATA中，也不再需要將 csrfToken寫在data中了，
data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
success:function (data) { //發送AJAX請墳成功后，執行回調函數，data則是獲取的后端數據，
$("#i3").val(data); //給DOM元素設置值
}
})
})