Django - Ajax - 參數

時間 2019-11-13

標籤 django ajax 參數欄目 Python 简体版

原文原文鏈接

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')