Ajax 實戰（一）

2022 年 3 月 7 日
筆記
Ajax, django

Ajax 實戰（一）

Ajax 實戰（一）

簡介

AJAX（Asynchronous Javascript And XML）翻譯成中文就是「非同步Javascript和XML」。即使用Javascript語言與伺服器進行非同步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML,現在更多使用json數據）

同步交互：客戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；
非同步交互：客戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求；

優點

非同步
局部刷新：不需要刷新整個頁面，節省了資源的消耗，給用戶的體驗極佳

常見應用場景

入門案例

'''
需求：
實現簡單的計算器，加法舉例
通過Ajax，實現前端輸入兩個數字，伺服器做加法，返回到前端頁面
'''

'''urls.py'''
path('', views.test_Ajax)

'''views.py'''
from django.shortcuts import render, HttpResponse

def test_Ajax(request):
    if request.method == 'POST':
        num1 = int(request.POST.get('num1')) # 獲取前端提交的數據
        num2 = int(request.POST.get('num2'))
        print(num1, num2)
        return HttpResponse(num1 + num2) # 返回給前端
    return render(request, 'sum.html')

'''sum.html'''
'''html結構'''
<div class="container">
    <div class="row">
        <h1 class="text-center">Ajax</h1>
        <div class="col-md-6 col-lg-offset-3 ">
            <input type="text" id="d1" class="active form-control">
            <p class="text-center">+</p>
            <input type="text" id="d2" class="sucess form-control">
            <p class="text-center">=</p>
            <input type="text" id="d3" class="info form-control">
            <br>
            <button id='btn' class="btn btn-success btn-block">calculate</button>
        </div>
    </div>
</div>
'''js實現'''
<script>
    {#綁定點擊事件#}
    $('#btn').click(function () {
        {#獲取input元素內輸入的值#}
        var num1 = $('#d1').val()
        var num2 = $('#d2').val()

        $.ajax({
            url: '',  //ajax請求的地址
            method: 'post', //請求方式
            data: {num1: num1, num2: num2}, //攜帶參數
            success: function (data) {  //服務端成功返回會回調，執行匿名函數
                console.log(data)
                $('#d3').val(data)
            }
        })
    })
</script>

注意：

使用Ajax的時候，在視圖函數中使用request對象方法判斷什麼類型的請求，如果是Ajax，不管本質是post還是get等，寫request.is_ajax()即可

基於Ajax進行登錄驗證

需求：

1.前端登錄頁面

2.後端資料庫驗證前端提交的資訊

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

'''views.py'''
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
from django.http import JsonResponse
import json

def login(request):
    if request.method == 'GET':
        return render(request,'login.html')
    # elif request.method=="POST":
    elif request.is_ajax():
        response = {'status':200,'msg':None}
        username = request.POST.get('username')
        password = request.POST.get('password')
        # 資料庫校驗
        res = models.User.objects.filter(username=username,password=password).first()
        if res:
            # 登錄成功
            # return redirect('//www.baidu.com')  # ajax使用重定向出錯
            response['msg']='登錄成功'
        else:
            response['msg']='登錄失敗,用戶名或密碼錯誤'
            response['status']=404
        # return HttpResponse(json.dumps(response))
        return JsonResponse(response,safe=False,json_dumps_params={'ensure_ascii':False})

'''models.py'''
from django.db import models

class User(models.Model):
    name=models.CharField(max_length=32)
    password=models.CharField(max_length=32)

<body>
{#<form action="" method="post">#}
    <div class="container">
        <h1 class="text-center">Ajax登錄認證</h1>
        <div class="row">
            <div class="col-md-8 col-lg-offset-2">
                <p>Username: <input type="text" class="form-control" name="username" id="user_id"></p>
                <p>Password: <input type="password" class="form-control" name="password" id="pwd_id"></p>
                <p><button type="submit" class="btn btn-block btn-primary">提交</button> <span class="error" style="color: tomato"></span></p>
            </div>
        </div>
    </div>
{#</form>#}
</body>
<script>
    $('.btn').click(function (){
        $.ajax(
            {
                url:'/login/',
                method:'post',
                data:{username:$('#user_id').val(),password:$('#pwd_id').val()}, //返回給後端的數據
                success:function (data){
                    console.log(data)
                    //data是對象類型
                    if(data.status == 200){
                      //登錄成功，前端重定向
                        location.href='//www.baidu.com'

                    }else{
                        //登錄失敗
                        $('.error').html(data.msg)
                    }
                },
                error:function (data){
                    console.log(data)
                    alert('請求錯誤')
                }
            }
        )
    })
</script>

注意

如果使用Ajax，form表單提交完數據會自己刷新，所有在使用button元素提交的時候會刷兩次，可以講form元素去掉；
如果使用Ajax，form元素也可以不去掉，那麼就不能使用button元素，可以使用input元素，type=『button』
在Ajax中，如果使用json模組序列化數據，前端返回的是字元串不是對象，響應頭中是text/html格式，需要自己在html頁面通過JSON.parse(data)反序列化，ajax接收到數據後需要自己轉成對象
在Ajax中，如果使用JsonResponse模組序列化數據，返回的就是一個對象，響應頭中是application/json格式，不需要自己手動反序列化，ajax接收到數據後會自動轉成對象
如果使用Ajax，能不能解析返回的數據，取決於響應的類型，如果是json類型，那麼就自動解析，不是需要自己手動解析
如果使用了ajax，後端就不要返回rediret，render，HttpResponse，直接返回JsonResponse，因為返回json前端才能處理
總結：後端返回數據，統一都用JsonResponse

HTTP請求編碼格式和報文

我們知道請求和響應都有數據格式，請求格式常用得比如：urlencoded、form-data、json····響應格式常用得有：text/html、json····

application/x-www-form-urlencoded：窗體數據被編碼為名稱/值對。（默認）。空格轉換為「+」加號，但不對特殊字元編碼。
multipart/form-data：窗體數據被編碼為一條消息，頁上的每個控制項對應消息中的一個部分。
text/plain：窗體數據以純文本形式進行編碼，其中不含任何控制項或格式字元。
JSON：以純文本形式進行編碼，其格式為JSON

現有HTML程式碼如下：用屬性enctype的值來區分Content-Type

<form action="//localhost:8080" method="post" enctype="application/x-www-form-urlencoded">

    <input type="text" name="userName" value="zhan gsan"/>
    <input type="text" name="password" value="password"/>
    <input type="file" name="resultFile" />
    <input type="submit" value="submit"/>

</form>

當Content-Type為不同值時，報文結果分別為下：

Content-Type=application/x-www-form-urlencoded

瀏覽器用x-www-form-urlencoded的編碼方式把form數據轉換成一個字串（name1=value1&name2=value2…），然後把這個字串append到url後面，用?分割，載入這個新的url。當action為post時候，瀏覽器把form數據封裝到http body中，然後發送到server。

 POST / HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 62
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

userName=zhan+gsan&password=password&resultFile=dddddddddd.vlx

Content-Type=multipart/form-data

瀏覽器會把整個表單以控制項為單位分割，並為每個部分加上Content-Disposition(form-data或者file),name(控制項name)等資訊，並加上分割符(boundary)。
此報文分割符為：boundary=—-WebKitFormBoundarys70zFPQBqcgHeMy9

POST / HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 659
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarys70zFPQBqcgHeMy9
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

------WebKitFormBoundarys70zFPQBqcgHeMy9
Content-Disposition: form-data; name="userName"

zhan gsan
------WebKitFormBoundarys70zFPQBqcgHeMy9
Content-Disposition: form-data; name="password"

password
------WebKitFormBoundarys70zFPQBqcgHeMy9
Content-Disposition: form-data; name="resultFile"; filename="dddddddddd.vlx"
Content-Type: application/octet-stream

{"nodes":[{"name":"11111","image":"theme/gast/ren.png","entityId":"1000001"},{"name":"5555","image":"theme/gast/ren.png","entityId":"1000001"}],"edges":[{"source":"11111","target":"5555","relation":"ssss","count":"1","currentExtDepth":"1"}]}
------WebKitFormBoundarys70zFPQBqcgHeMy9--

Content-Type=text/plain

POST / HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 66
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: text/plain
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

userName=zhan gsan
password=password
resultFile=dddddddddd.vlx

參考：請求頭編碼格式

總結

1 http --post--請求，有編碼格式，主流有三種
	-urlencoded ：默認的----》從request.POST取提交的數據
    -form-data ：上傳文件的----》從request.POST取提交的數據，request.FILES中取文件
    -json      ：ajax發送json格式數據-----》request.POST取不出數據了,需要request.body
    
2 使用ajax和form表單，默認都是urlencoded格式
3 如果上傳文件：form表單指定格式,ajax要使用Formdata對象

4 如果編碼方式是urlencoded格式，放到body體中數據格式如下
	username=Hammer&password=123  # post請求，Ajax預處理後得數據格式，urlencoded數據格式
    
5 如果是formdata編碼格式，body體中是：兩部分，數據和文件
	
6 如果是json格式，body體中的格式是：就是json格式字元串
	-注意：注意：注意：如果這種格式，request.POST取不到值了

上傳文件

前面我們介紹到上傳文件可以通過form表單來上傳文件，通過input元素修改type=file就上傳單個文件，如果加multiple參數就可以上傳多個文件等····

form表單上傳文件

<h1>form表單上傳文件</h1>
<form action="" method="post" enctype="multipart/form-data">
    <p>用戶名：<input type="text" name="name"></p>
    <p>文件：<input type="file" name="myfile"></p>
    <input type="submit" value="提交">
</form> 

def file_upload(request):
    if request.method=='GET':
        return render(request,'file_upload.html')
    else:
        myfile=request.FILES.get('myfile')
        with open(myfile.name,'wb') as f:
            for line in myfile:
                f.write(line)
        return HttpResponse('ok')

現在我們可以使用ajax上傳文件，那麼格式和編碼有什麼要求？實例如下：

<h1>ajax上傳文件</h1>
<p>用戶名：<input type="text" id="id_name"></p>
<p>文件：<input type="file" id="id_myfile"></p>
<button id="id_btn">提交</button>


<script>
    $('#id_btn').click(function () {
        //如果要上傳文件，需要藉助於一個js的FormData對象
        var formdata = new FormData() //實例化得到一個FormData對象
        formdata.append('name', $('#id_name').val()) //追加了一個name對應填入的值
        //追加文件
        var file = $('#id_myfile')[0].files[0]
        formdata.append('myfile', file)
        $.ajax({
            url: 'file_upload',
            method: 'post',
            //上傳文件，一定要注意如下兩行
            processData: false,  //不預處理數據，
            contentType: false,  //不指定編碼格式，使用formdata對象的默認編碼就是formdata格式
            data: formdata,
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>

def file_upload(request):
    if request.method=='GET':
        return render(request,'file_upload.html')
    else:
        name=request.POST.get('name')
        myfile=request.FILES.get('myfile')
        print(type(myfile)) # 查看類型
        from django.core.files.uploadedfile import InMemoryUploadedFile
        with open(myfile.name,'wb') as f:
            for line in myfile:
                f.write(line)

        return HttpResponse('上傳成功')

先拿到input元素：$(『#id_myfile』)[0]

再拿到所有文件：$(『#id_myfile』)[0].files

再通過索引取出要取得文件：$(『#id_myfile』)[0].files[0]

總結

如果要上傳文件，需要藉助於一個js的FormData對象
Ajax上傳局部刷新
Ajax上傳文件如果不想使用urlencoded默認處理，可以通過 processData: false不預處理，contentType: false不指定編碼格式

Ajax上傳json格式

注意：json模組在3.5版本之前不可以直接loads二進位格式（bytes），在3.6版本以後可以

Ajax傳json格式只需指定編碼格式和序列化數據就能上傳

後端需要注意得是post請求得從body體里取數據，然後反序列化即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<h1>ajax提交json格式</h1>


<p>用戶名: <input type="text" id="id_name"></p>
<p>密碼: <input type="password" id="id_password"></p>
<button id="id_button">提交</button>
</body>

<script>

    $('#id_button').click(function () {

        $.ajax({
            url: '/ajax_json/',
            method: 'post',
            contentType: 'application/json',  //指定編碼格式
            data: JSON.stringify({name:$('#id_name').val(),password:$('#id_password').val()}), //json格式字元串，序列化數據
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>

後端

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

    else:
        # json格式，從POST中取不出來
        name=request.POST.get('name') 
        print(type(request.POST))  # 返回QueryDict對象，不允許修改
        # from  django.http.request import QueryDict
        print(name) # None 
        
        # 在body體中，bytes格式
        # django默認只處理兩種格式數據urlencode和form-data，json格式需要自己處理
        import json
        request.data=json.loads(request.body)  # 反序列化，從前端獲取數據
        
        name=request.data.get('name')
        password=request.data.get('password')
        print(name)
        print(password)
        return HttpResponse('ok')

django內置序列化

django提供了一個模組可以將對象直接序列化，然後返回給前端，但是可擴展性低，欄位不能控制，返回得是一個整體

from django.core import serializers
	def user_list(request):
        user_list = models.User.objects.all() # queryset對象
      res = serializers.serialize('json', user_list)
    return HttpResponse(res)

現在想要欄位可控，可以採用for循環列表套字典得格式，然後序列化

def user_list(request):
        user_list = models.User.objects.all() # queryset對象
        l = []
        for user in user_list:
            l.append({'name':user.name,'password':user.password})
        return JsonResponse(l,safe=False)  # 返回給前端
    # 如果使用json模組不需要加safe參數

ps:可以通過json.cn將序列化的數據轉成對象

【待續】

Tags: Ajax django

Ajax 實戰（一）

Ajax 實戰（一）

簡介

入門案例

基於Ajax進行登錄驗證

HTTP請求編碼格式和報文

Content-Type=application/x-www-form-urlencoded

Content-Type=multipart/form-data

Content-Type=text/plain

總結

上傳文件

Ajax上傳json格式

django內置序列化

VirMach 便宜 VPS

QNews

Ajax 實戰（一）

Ajax 實戰（一）

簡介

入門案例

基於Ajax進行登錄驗證

HTTP請求編碼格式和報文

Content-Type=application/x-www-form-urlencoded

Content-Type=multipart/form-data

Content-Type=text/plain

總結

上傳文件

Ajax上傳json格式

django內置序列化

分享此文：

Related Posts

Java JVM——9.方法區

JavaScript ES6對Proxy的原生支援的一個例子：開發人員學習額外的程式語言

iptables使用詳解(centos7)

Flask 自建擴展

VirMach 便宜 VPS

QNews

熱門搜尋