django-ajax細說ajax的post請求與get請求的區別

時間  2019-11-12
標籤 django ajax 細說 post 請求 區別 欄目 Python 简体版
原文   原文鏈接

什麼是json？

定義：html

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

講json對象，不得不提到JS對象：jquery

 

 

合格的json對象：ajax

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]

不合格的json對象：django

{ name: "張三", 'age': 32 }                     // 屬性名必須使用雙引號

[32, 64, 128, 0xFFF] // 不能使用十六進制值

{ "name": "張三", "age": undefined }            // 不能使用undefined

{ "name": "張三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}    // 不能使用函數和日期對象
}

　　歸納的的說JSON必須有雙引號。編程

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

JSON的好處　

　　JSON 格式於2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。json

　　JSON 格式有兩個顯著的優勢：書寫簡單，一目瞭然；符合 JavaScript 原生語法，能夠由解釋引擎直接處理，不用另外添加解析代碼。因此，JSON迅速被接受，已經成爲各大　　後端

　　網站交換數據的標準格式，並被寫入ECMAScript 5，成爲標準的一部分。瀏覽器

AJAX簡介

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

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

AJAX除了異步的特色外，還有一個就是：瀏覽器頁面局部刷新；（這一特色給用戶的感覺是在不知不覺中完成請求和響應過程）cookie

js實現的局部刷新:

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

    <style>
        .error{
            color:red
        }
    </style>
</head>
<body>


<form class="Form">

    <p>姓名  <input class="v1" type="text" name="username" mark="用戶名"></p>
    <p>密碼  <input class="v1" type="text" name="email" mark="郵箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery-3.1.1.js"></script>

<script>

    $(".Form :submit").click(function(){

        flag=true;

        $("Form .v1").each(function(){

            var value=$(this).val();
            if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var $span=$("<span>");
                 $span.html(mark+"不能爲空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){
                      $span.remove();
                 },800);

                 flag=false;
                 return flag;

            }
        });
        return flag
    });


</script>


</body>
</html>　　

局部刷新相對於FORM表單的好處就是，減小刷新的數據，以致於減小流量和代寬。　

AJAX常見應用情景

當咱們在百度中輸入一個「老」字後，會立刻出現一個下拉列表！列表中顯示的是包含「傳」字的4個關鍵字。

其實這裏就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含「傳」字的前10個關鍵字，而後服務器會把查詢到的結果響應給瀏覽器，最後瀏覽器把這4個關鍵字顯示在下拉列表中。

  • 整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！
  • 當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！

       

 

當輸入用戶名後，把光標移動到其餘表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名爲zhangSan的用戶是否存在，最終服務器返回true表示名爲lemontree7777777的用戶已經存在了，瀏覽器在獲得結果後顯示「用戶名已被註冊！」。

  • 整個過程當中頁面沒有刷新，只是局部刷新了；
  • 在請求發出後，瀏覽器不用等待服務器響應結果就能夠進行其餘操做；

AJAX的優缺點

優勢：

  • AJAX使用Javascript技術向服務器發送異步請求；
  • AJAX無須刷新整個頁面；

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

　　

下面直接上代碼，這是我在學習中遇到的一寫困惑

一下是一段簡單的ajax請求

 

這是個人Django目錄，紅框內是兩個html文件。

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>用戶名<input type="text" id="aa" > </p>
<p>密碼<input type="password" id="bb"> </p>
<p><input type="button" class="cc"> 提交</p>
</body>
<script src="/static/jquery-3.2.1.min.js"></script>          #這裏的ajax是在jquery裏用的，因此導入jquery
<script src = "/static/jquery.cookie.js"></script>
<script>
    $(".cc").click(function () {       
        $.ajax({
            url: '/login/',    #這裏是視圖函數處理數據的路徑，是這個def login（request）函數在處理
            type: 'POST',
            headers:{"X-CSRFToken":$.cookie('csrftoken')}, #發起的是post請求因此要加csrftoken，須要引入jquerycookie,目的就是聲明下，能夠經過django中間件的驗證機制
            data: {
 #這裏的name，pwd是個key能夠隨便寫，可是要有意義，後面的視圖函數裏會調用這個key.
        
                  name: $('#aa').val(),   #這是獲取input框內的值，傳給後端,#aa是經過id取得
                  pwd: $('#bb').val(), },
#以上是AJAX發送的帶數據的post請求，將數據提交給後端函數處理。
            

　　　　　　　　success: function (data) {
                    var dat = JSON.parse(data);
                    console.log(dat)
#以上是後端函數返回成功的信息
            }

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

view.py

def login(request):
    if request.method == "GET":
        return render(request,"login.html")
    else:
        #下面的name，pwd,就是剛纔的key
        username = request.POST.get('name') 
        password = request.POST.get('pwd')

    response = {'flag': False}
    if username == 'huang' and password == '123':
        response["flag"] = True

    return HttpResponse(json.dumps(response))

首先說下代碼邏輯

個人login裏有兩個input框，一個button按鈕，想要實現的功能就是帳號密碼後將數據提交給相應的視圖函數處理。

如圖：

那麼重點來了我可不能夠寫成如下形式呢

view.py

def login(request):
    
    username = request.POST.get('name') 
    password = request.POST.get('pwd')

    response = {'flag': False}
    if username == 'huang' and password == '123':
        response["flag"] = True

    return HttpResponse(json.dumps(response))  　　

這裏我用的是GET請求的（和上面的區別只有視圖函數，區別就是我這裏是GET請求）

這麼寫顯然是不行的，緣由就是，當你向後端函數發送請求的時候你只能選擇是讓函數處理的你請求中帶的數據仍是讓函數返回一個頁面。

若是你的視圖函數就想這麼寫，那麼就須要改下你的url.py，view.py,loginl.html

url.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^aa/', views.aa),
]

view.py

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

def aa(request):

    username=request.GET.get("name")
    password=request.GET.get("pwd")

    response={"flag":False}
    if username=="yuan" and password=="123":
        response["flag"]=True
    import json
    import time

    time.sleep(10)
    return HttpResponse(json.dumps(response))

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>用戶名<input type="text" id="aa" > </p>
<p>密碼<input type="password" id="bb"> </p>
<p><input type="button" class="cc"> 提交</p>
</body>
<script src="/static/jquery-3.2.1.min.js"></script>          #這裏的ajax是在jquery裏用的，因此導入jquery
<script src = "/static/jquery.cookie.js"></script>
<script>
    $(".cc").click(function () {       
        $.ajax({
            url: '/aa/',    #這裏是視圖函數處理數據的路徑，是這個def login（request）函數在處理,這裏的路徑變了
            type: 'POST',
            headers:{"X-CSRFToken":$.cookie('csrftoken')}, #發起的是post請求因此要加csrftoken,目的就是聲明下，能夠經過django中間件的驗證機制
            data: {
 #這裏的name，pwd是個key能夠隨便寫，可是要有意義，後面的視圖函數裏會調用這個key.
        
                  name: $('#aa').val(),   #這是獲取input框內的值，傳給後端
                  pwd: $('#bb').val(),          
            },
#以上是AJAX發送的帶數據的post請求，將數據提交給後端函數處理。
            

　　　　　　　　success: function (data) {
                    var dat = JSON.parse(data);
                    console.log(dat)
#以上是後端函數返回成功的信息
            }

        })
    })
</script>
</html>            　
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程