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')
相關文章
相關標籤/搜索