django之ajax組件

時間 2020-05-01

標籤 django ajax 組件欄目 Python 简体版

原文原文鏈接

一什麼是Ajax

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

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

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

優勢：

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

需求：在企業中寫增刪改查通常就兩類，一類是一點添加刪除修改都是跳轉到新的url來作(form表單)。另一類就是基於ajax來作的。jquery

　　註冊一個帳戶ajax

　　　　一點註冊這個按鈕彈出一個框讓用戶填寫用戶名、密碼、選擇男女、下拉框選擇城市等等。數據庫

　　　　(若是輸入都是正確的應該增長，若是填寫的不正確頁面上應該進行錯誤提示)django

　　　　填寫完全部信息一點註冊，數據傳送到後臺作添加，添加成功以後頁面刷新。json

　　注意：bootstrap

　　　　若是是form表單，一點提交，頁面會直接刷新，看不到彈出框的錯誤提示信息。瀏覽器

Ajax向後臺提交數據，悄悄的向某個url發送請求。前端框架

怎麼用jquery級別的ajax：

　　第一步下載jquery並引入：

　　第二步指定url、指定發送形式、指定發送的數據

$.ajax({
　　url:'',　　　　　　　//寫url地址
　　type:'',　　　　　　//寫GET或POST
　　data:{},          //寫向後臺要提交的數據，格式是字典形式
　　success:function(data){
　　　　//回調函數，當向後臺發了一個請求，後臺處理完而且返回了一段結果的時候這個函數自動執行。
　　　　//data,後臺返回的數據

　　　　}
})
若是是GET請求ajax會自動把數據內容追加到url路徑上發過去
若是是POST請求ajax會自動把數據內容放到請求體裏面發過去

ajax向後臺提交數據的語法就是這麼寫的，我以爲難點在於：

怎麼獲取元素裏的值
- 找到提交的標籤綁定點擊事件
- 找到有數據的標籤，找值是.val(),找屬性值是.attr()。
  - 若是是男女的選擇框須要作特殊處理--prop設置屬性針對的是checked、selected、disabled這樣的屬性。
後臺獲取前端傳的值，而後返回什麼樣的數據給前端
- 後臺獲取數據存到數據庫，數據庫有什麼字段就寫什麼。
- 存的過程可能出錯，咱們須要捕獲異常，給前端返回錯誤提示，提示信息用字典，json格式　　
前端獲取後臺傳的值怎麼去用
- 根據返回的狀態碼作不一樣的操做
  - 若是後臺存入數據成功，前端須要對數據進行操做
    - 　　
  - 若是失敗要一是錯誤信息

例子中用了

前端框架bootstrap（提供了現成的樣式+效果）。
FontAwesome

def add_book(request):
    res = {'status': '200', 'msg': None}
    return JsonResponse(res)

在前端頁面裏將json字符串轉換成字典的方法：相似於Python中的json.loads()

dic = JSON.parse(data);    #data是json格式的字符串

在前端頁面裏將字典轉換成字典json字符串的方法：相似於Python中的json.dumps()

dic = {'k1':'v1','k2':'v2'}
str = JSON.stringify(dic)

模態對話框適合ajax。

二基於jquery的Ajax實現

在頁面上搞點事情，日後臺發送數據。

由於ajax是jquery封裝了一下。因此在html文件裏須要導入它。

後臺返回的不多是個頁面，

咱們先看form表單提交數據：

<!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>form表單提交數據</title>
</head>
<body>
<form action="/login1/" method="post">
    {% csrf_token %}
    <p>用戶名：<input type="text" name="name"></p>
    <p>密碼：<input type="password" name="pwd"></p>
    <input type="submit" value="提交">
</form>
</body>
</html>

login1.html

from django.shortcuts import render

# Create your views here.

def login1(request):
    if request.method == 'GET':
        return render(request,'login1.html')

views視圖函數

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),
]

urls路由

基於jquery的Ajax實現登陸功能:

Ajax的序列化與反序列化

ajax提交json格式數據：

在前端頁面裏將字典轉換成字典json字符串：相似於Python中的json.dumps()

$.ajax({
    url: '/add_book/',
    type: 'post',
    data: JSON.stringify(要傳遞的字典格式數據),
    success: function (data) {

    })

JSON.stringify()方法

ajax反序列化

在前端頁面裏將json字符串轉換成字典的方法：相似於Python中的json.loads()

$.ajax({
    url: '/add_book/',
    type: 'post',
    data: {},
    dataType:'JSON',  #會將後臺傳的json字符串轉換成字典
    success: function (data) {
          }
    })

方法一

$.ajax({
    url: '/add_book/',
    type: 'post',
    data: {},
    success: function (data) {
    //將後臺傳的json字符串轉換成字典
    var dic = JSON.parse(data);
        }
    })

JSON.parse()方法

111