Django-Ajax 前端-jQuery-ajax

時間 2019-12-06

原文原文鏈接

一：Ajax簡介

做用：前端瀏覽器向後端服務器發送請求的一種技術css

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

1：瀏覽器向服務器發送請求的形式

（1）地址欄輸入url 默認get方式
（2）form表單的提交按鈕 get或者post
（3） a標籤默認get前端

（4）ajaxjava

2：ajax引言

上面的請求形式中前3個的請求方式時，瀏覽器接收到迴應消息時，會刷新整個頁面。那麼能不能實現局部刷新呢？ajax就能實現這點。python

3：ajax的特色、優勢

　　異步交互----AJAX使用Javascript技術向服務器發送異步請求jquery

　　瀏覽器頁面局部刷新---AJAX無須刷新整個頁面ajax

補充：數據庫

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

4：ajax爲何可以局部刷新呢？

ajax是JavaScript的一種技術。而ajax只是DOM操做中觸發的事件，因此對於瀏覽器來講還會再開始的頁面上的局部渲染事件。json

二：ajax案例--利用ORM（Django）-計算

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Ajax</title>
 6     <script src="/static/js/jquery-3.3.js"></script>
 7 </head>
 8 <body>
 9 {% csrf_token %}
10 <input type="text" id="num1"> + <input id="num2" type="text"> = <input id="ret" type="text">
11 <button class="cal ">計算</button>
12 
13 <script>
14     $('.cal').click(function () {
15         var num1 = $("#num1").val();
16         var num2 = $("#num2").val();
17 
18         $.ajax({
19             url: '/cal/',
20             type: 'get',
21             data:{     //這不是字典，是對象類型，特色，鍵能夠不加引號
22                num1:num1,
23                num2:num2,
24                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
25             },
26             success(response) {
27 
28                 $('#ret').val(response)
29             }
30 
31         })
32     })
33 
34 </script>
35 
36 
37 </body>
38 </html>

index.html

urls.py

    path('index/', views.index),
    path('cal/', views.cal),

views.py

def index(request):

        return render(request,'index.html')
def cal(request):
    num1 = request.GET.get('num1')
    num2 = request.GET.get('num2')
    num3 = float(num1) + float(num2)
    return HttpResponse(str(num3))

分析：

首先咱們再瀏覽器上訪問http://127.0.0.1:8000/index/，輸入計算數值，並點擊提交按鈕。

其次，點擊提交按鈕（這已是到服務端了）就會再index.html文件中觸發onclick事件，而事件裏有ajax請求(請求消息：ajax的get url data)，根據ajax的url向服務端發送相應數據，實際上這裏就會再服務端經過url再經過view中的函數處理，處理完以後返回數據。

實際上這個數據(response)就會返回到ajax的success回調函數裏，而後咱們再渲染到前端的頁面上。

從這裏咱們能夠看到前端頁面其實是沒有變更的，變更的只不過是局部事件觸發渲染出來的結果。固然這就體現了ajax的做用了

二：json

咱們須要把數據轉化爲json數據，由於網絡傳輸中和文件存儲中須要轉成序列化數據才能夠

1:python中的json

python經常使用模塊--序列化模塊

2:json數據標準

json字符串是雙引號

3:javascript中的json使用

序列化方法：  JSON.stringify()  等同於Python json.dumps()
反序列化方法： JSON.parse()      等同於Python json.loads()

三：案例--登錄認證

要求：登錄成功跳轉到首頁，失敗則在後面提示

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <script src="/static/js/jquery-3.3.js"></script>
 8 
 9 </head>
10 <body>
11 
12 <form>
13        用戶名 <input type="text" id="user">
14        密碼 <input type="password" id="pwd">
15 {#        這裏form表單裏用button#}
16        <input type="button" value="提交" id="login_btn"><span class="error"></span>
17        {% csrf_token %}
18 
19 </form>
20 
21 <script>
22 
23     $("#login_btn").click(function () {
24 
25         // 發送Ajax請求登陸認證
26 
27         $.ajax({
28             url:"/login/",
29             type:"post",
30             data:{
31                 user:$("#user").val(),
32                 pwd:$("#pwd").val(),
33                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
34             },
35             success:function (response) {
36                 console.log(response);   // json字符串
37                 var res=JSON.parse(response);  //js中的反序列化
38                 console.log(res);
39                 if (res.user){
40                     // 登錄成功
41                     location.href="/index/"  //跳轉到首頁
42                 }else{
43                     // 登陸失敗，則顯示。。。
44                     $(".error").html(res.error).css("color","red");
45                     setTimeout(function () {
46                         $(".error").html("")
47                     },1000)
48                 }
49 
50             }
51         })
52     })
53 
54 
55 </script>
56 
57 </body>
58 </html>

urls.py

 path('login/', views.login),

views.py

def login(reqeust):

    if reqeust.method=="POST":

        res={"user":None,"error":""}

        print(reqeust.POST)
        user=reqeust.POST.get("user")
        pwd=reqeust.POST.get("pwd")
        # 與數據庫中的數據表信息進行比對
        user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user_obj:
            res["user"]=user
        else:
            res["error"]="用戶名或者密碼錯誤！"
        return HttpResponse(json.dumps(res))  #須要序列化

    else:
        return render(reqeust,"login.html")

View Code

相關參考：博文