Django 之Ajax

時間 2019-11-11

標籤 django ajax 欄目 Python 简体版

原文原文鏈接

必備知識：json

什麼是json

定義css

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。
它基於 ECMAScript (w3c制定的js規範)的一個子集，採用徹底獨立於編程語言的文本格式來存儲和表示數據。
簡潔和清晰的層次結構使得 JSON 成爲理想的數據交換語言。 易於人閱讀和編寫，同時也易於機器解析和生成，
並有效地提高網絡傳輸效率。

請求web網站的方式

     請求方法                  請求方式    
1、 地址欄    url              get請求
2、 超連接標籤                get請求
3、 form表單                  get請求 post請求
四、 ajax請求                  get請求 post請求

stringify與parse方法

JSON.parse():     用於將一個 JSON 字符串轉換爲 JavaScript 對象　
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ;   // 錯誤
console.log(JSON.parse('[12,undefined]')) ;   // 錯誤

JSON.stringify(): 用於將 JavaScript 值轉換爲 JSON 字符串。　
eg:  console.log(JSON.stringify({'name':"egon"})) ;

介紹

Ajax

　　Ajax（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。html

同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；
異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。

　　Ajax除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）。所以使用ajax的主要特色有以下幾點：（1）Ajax使用Javascript技術向服務器發送異步請求；（2）Ajax無須刷新整個頁面；（3）由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此Ajax性能高。在django入門項目中咱們已經簡單的介紹了一下ajax應用。下面咱們將作詳細介紹。jquery

Ajax的優缺點

優勢：

Ajax使用JavaScript技術向服務器發送異步請求;web

Ajax無須刷新整個頁面，提升用戶的體驗度ajax

由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此Ajax性能高數據庫

關於AJAX的例子

ajax實現方式（無參數）

　　具體實現方式實例以下（完成一次ajax請求，且完成了一個局部刷新）：django

html文件部分：編程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h3>INDEX</h3>
<button class="s1">send_ajax</button>
<p class="name"></p>

<script>
    // ajax的無參請求
    $(".s1").click(function () {
        // 觸發ajax事件
        $.ajax({
            url: "/ajax_handle/",
            type: "get",
            success: function (data) {   {# data至關於服務端拿過來的"黎詩"的數據 #}
{#  當某一個事件完成以後，固定執行另一個函數      #}
{#  在這裏success也至關於一個回調函數， 當咱們請求過去，到達服務器，
服務器響應過來return HttpResponse("黎詩")，這裏success開始工做 ，把數據響應到客戶端 這樣就是完整的過程   #}
                console.log(data);
{#                完成一次ajax請求，且完成了一個局部刷新#}
                $(".name").html(data)  {# 把一個data字符串賦到一個文本上 #}
            }
        })
    });
    
</script>
</body>
</html>

from django.shortcuts import render,HttpResponse

# Create your views here.


def index(request):
    return render(request,"index.html")


def ajax_handle(request):
    return HttpResponse("黎詩")

Views.py

    url(r'^index/', views.index),  # index(request) 必須需傳一個參數
    url(r'^ajax_handle/', views.ajax_handle),  # index(request)

urls。py

關於AJAX的有參操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>


<input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="sum">

{#爲何不須要name標籤：form表單的做用，點submit的按鈕,自動綁定事件，以name,ajax,是咱們直接拼鍵值對了，咱們寫的是什麼，他就是什麼#}
<button class="count">計算</button>



<script>

    // ajax的有參請求

    //綁定點擊事件
    $(".count").click(function () {
        //觸發ajax請求
        $.ajax({
            url:"/count/",
{#            data-->指定你要放的參數#}
            data:{"num1":$("#n1").val(),"num2":$("#n2").val()},
        {# 這裏寫的都是JavaScript代碼,與Python無關，不是字典,是基於js的數據類型，obj類型#}
{#        這裏加鍵值對#}
            success:function (data) {
                console.log(data);
                $("#sum").val(data)


            }
        })
    })
</script>
</body>
</html>

def count(request):
    num1 = request.GET.get("num1")
    num2 = request.GET.get("num2")
    ret = int(num1)+int(num2)
    return HttpResponse(str(ret))

邏輯處理views.py

注意點

data裏面的類型須是符合序列化字符串json

校驗用戶註冊信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>

{% csrf_token %}
<h4>校驗用戶是否存在</h4>
<input type="text" id="user"><span></span>


<script>

    //校驗註冊信息
    $("#user").blur(function () {
        $.ajax({
            url: "/jiaoyan_user/",  {# 處理頁面地址，表示ajax要用 #}
            type: "post",  {# 傳值方式 #}
            data: {         {# 傳遞處處理頁面的值，也是json數據 #}
                "user": $("#user").val(),
                "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
            success: function (data) {
                {# 表示處理成功以後作什麼，後面跟着一個匿名函數。回調函數，表示處理頁面處理完數據之後執行這個函數。data表示處理頁面返回的值，用形參接收 #}
                console.log(data);

                var data = JSON.parse(data);
                {# 反序列化爲字典#}
                if (data.is_reg) {
                    $("#user").next().html("該用戶已註冊").css("color","red");
                    {# 當註冊，添加錯誤信息，填充到後面的span標籤#}
                }
            }
        })
    })
</script>
</body>
</html>

def jiaoyan_user(request):
    response={"is_reg":True}
    user=request.POST.get("user")
    # == 表示在數據庫裏有
    if user == "jassin":
        pass
    else:
        response["is_reg"] = False
    import json
    # 返回到頁面，要序列化成字符串
    return HttpResponse(json.dumps(response))

Views.py

  url(r'^jiaoyan_user/', views.jiaoyan_user),  # index(request)

urls.py

注意點

關於csrf錯誤瀏覽器

csrf跨站請求僞造

方式一

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

方式二

<form>
{% csrf_token %}
</form><br><br><br>$.ajax({<br>...<br>data:{

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

方式三

<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
 
headers:{"X-CSRFToken":$.cookie('csrftoken')},
 
})

用戶登陸驗證例子

$.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

contenType

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

contentType類型一　

　　上述實例中是咱們對ajax的基本使用，也是ajax中參數contentType的默認使用方式，他決定了發送信息至服務器時內容編碼的類型。現將此參數的默認使用方式總結以下：

data：當前ajax請求要攜帶的數據，是一個object對象，ajax方法就會默認地把它編碼成某種格式(urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。
contentType："application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；

contentType類型二　　

　　上述這種默認參數形式，data中的csrf跨站請求僞造鍵值對會被中間件自動識別，contentType參數還有以下一種形式，介紹以下：

contentType:"application/json"，即向服務器發送一個json字符串。
注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象

相關標籤/搜索

django+ansible+ajax

django+jquery+ajax+post

python3+pycharm+django+django

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。