Django - Ajax - 參數

1、Jquery實現Ajax

url type data success error complete statusCode javascript

{% 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!"))

2、$.ajax參數

請求參數：html

######################------------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"是同樣的！

3、csrf跨站請求僞造

$.ajaxSetup({java

　　 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },

});

<form>jquery

{% csrf_token %}

</ form >

< br >< br >< br >

$.ajax({< br >...< br >data:{"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();}<br>})

<script src="{% static 'js/jquery.cookie.js' %}"></script>ajax

$.ajax({django

　　headers:{"X-CSRFToken":$.cookie('csrftoken')},

})

https://www.cnblogs.com/yuanchenqi/articles/7638956.htmljson

4、示例

要掌握的 //js: 字符串 數組 object{}

編碼方式：
 url-encode form-data application/json

form / ajax 
 1.默認: Content-Type: application/x-www-form-urlencoded, 
 請求體中：
 user=yuan&pwd=123 
 request.POST: 
 post: <QueryDict: {'user': ['yuan'], 'pwd': ['123']}>
 
 2.上傳文件：enctype="multipart/form-data"
 formdate = new FormData();
 請求體中：
 ------WebKitFormBoundaryFTMqfCmRXmFBlfK4
 Content-Disposition: form-data; name="user"
 
 yuan
 ------WebKitFormBoundaryFTMqfCmRXmFBlfK4
 Content-Disposition: form-data; name="pwd"
 
 123
 ------WebKitFormBoundaryFTMqfCmRXmFBlfK4--
 
 3.contentType:'application/json', 
 請求體中：
 {"a":1,"b":2}
 接收數據：
 request.POST，request.GET 收不到數據！！
 request.body，才能收到！！ 
 dic = json.loads(request.body.decode('utf-8'))
 
 爲何？
 request.body 源數據都在這裏
 body: b'{"a":1,"b":2}'
 
 django: wsgi 只對 url-encode 轉，所以：request.POST 才能拿到數據！
 對於json，wsgi不轉，須要咱們從body中拿數據。

參數：後端

<script src="/static/js/jquery.cookie.js"></script>

headers:{"X-CSRFToken":$.cookie('csrftoken')},
contentType:'application/json', 
dataType:'json', # 拿到數據後，json解析數據，若沒有，就是str 

success:function (data) {}
error:function (data) {}
finally:function (data) {}

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

<form action="" method="post"> {% csrf_token %} <input type="text" name="user">
    <input type="text" name="pwd">
    <input type="submit">
</form>

<hr>

<button class="btn">click</button>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript"> $('.btn').click(function () { $.ajax({ headers:{"X-CSRFToken":$.cookie('csrftoken')}, url:'/test/', type:'POST', contentType:'application/json', data:JSON.stringify({a:1,b:2,'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()}), dataType:'json', success:function (data) { // json 字符串 。。。
 console.log(data); console.log(typeof data) }, error:function (data) { console.log('error',data) }, finally:function (data) { console.log('finally',data) } }) }); </script>

</body>
</html>

def test(request): if request.method == 'POST': print("post:",request.POST) print("get:",request.GET) print("files:",request.FILES) print("body:",request.body) import json dic = json.loads(request.body.decode('utf-8')) print(dic['a']) print(dic) # return HttpResponse('OK')
 info = {'name':'alex'} return HttpResponse(json.dumps(info)) # return HttpResponse("{'name':'alex'}")

    return render(request,'test.html')