Django - Ajax - 參數
阿新 • • 發佈：2018-06-16
jquery實現 http ssd OS ajax請求 調用 們的 parse send
一、Jquery實現Ajax
url type data success error complete statusCode
{% 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>
import json,time 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) time.sleep(10) return HttpResponse(json.dumps("Error Data!"))
二、$.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對象 views.py: json.loads(request.body.decode("utf8")) ######################------------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跨站請求偽造
$.ajaxSetup({data: {csrfmiddlewaretoken:‘{{ csrf_token }}‘},});
<form>{% csrf_token %}</form><br><br><br>$.ajax({<br>...<br>data:{"csrfmiddlewaretoken":$("[name=‘csrfmiddlewaretoken‘]").val();}<br>})
<scriptsrc="{% static ‘js/jquery.cookie.js‘ %}"></script>
$.ajax({headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)},})
https://www.cnblogs.com/yuanchenqi/articles/7638956.html
四、示例
Django - Ajax - 參數