web框架開發-Ajax

時間 2019-12-08

標籤 web 框架開發 ajax 欄目 HTML 简体版

原文原文鏈接

Ajax簡介

向服務器發送請求的4種方式html

一、瀏覽器地址欄，默認get請求
二、form表單：
       get請求
       post請求
三、a標籤，默認get請求

四、Ajax
     特色：
        1 異步請求
        2 局部刷新
     方式：

        get
        post

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

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

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

場景：ajax

優勢：chrome

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

基於jquery的Ajax實現

Ajax基本語法和參數數據庫

<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",  //請求URL，注意寫法，寫在兩個反斜槓之間，若是不寫，就是默認當前的IP地址和端口，和action同樣
               type:"POST",            //請求方式
               data:{username:"Yuan",password:123},  //請求數據

               contentType：  //格式
               success:function(data){           //回調函數，data接受服務器返回的數據，和上面是兩回事
                   console.log(data)
               },                                  
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

一個不帶數據的Ajax請求流程圖

注意：ajax的事件不能使用submit按鈕django

帶數據Ajax請求

效果圖json

html模板文件瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h3>這是一個Ajax測試</h3>
<input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="n3"><button class="btn">計算</button>

</body>
<script>
    $(".btn").click(function(){
        $.ajax({
            url:"/ajax_text/",  
            type: 'post',
            data:{
                'n1':$("#n1").val(),
                'n2':$('#n2').val()
            },
            success:function (data) {
                $('#n3').val(data)
            }
        })



    })
</script>
</html>

視圖函數文件服務器

from django.shortcuts import render,HttpResponse


# Create your views here.
def index(request):

    return render(request, 'index.html')

def ajax_text(request):
    n1=int(request.POST.get('n1'))
    n2=int(request.POST.get('n2'))
    ret=n1+n2
    print(ret)
    # 須要註釋掉setting裏面中間件的東西，雖然不明白，可是之後會講
    return HttpResponse(ret)

運行前，須要註釋掉setting裏面中間件的東西，雖然不明白，可是之後會講

若是請求方法換成使用get方法，第一次失敗了，why？

緣由是，忘記在視圖函數中，更改POST爲GET,必需要視圖函數中的方法也改成GET，對應上，才能接收到

基於Ajax的登陸驗證

實現用戶輸入用戶名和密碼以後，經過Ajax提交給服務端，服務端處理後返回響應信息，若是正確，跳轉到其餘頁面，若是不正確，在輸入框後顯示「用戶名或者密碼錯誤」。

須要用到 json 來傳遞字符串。

效果圖

view視圖代碼

from django.shortcuts import render, HttpResponse
from app01.models import *
import json


# 登錄首頁
def login(request):
    return render(request, 'login.html')


# 登陸驗證
def verify(request):
    # 獲取瀏覽器輸入的帳號和密碼
    print(1)
    user = request.GET.get('user')
    pwd = request.GET.get('pwd')
    # 查詢數據庫是否是存在該帳號和對應的密碼
    user_ret = User.objects.filter(user=user, pwd=pwd)
    # 定義響應信息
    ret = {'user': None, ',msg': None}
    if user_ret:
        ret['user'] = user
    else:
        ret['msg'] = '用戶名或者密碼錯誤！'
    ret = json.dumps(ret)
    print(ret)
    return HttpResponse(ret)  # 由於HttpResponse 必須用字符串，因此要用JSON

login.html模板文件代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
    </style>
</head>
<body>
<h3>歡迎來到登陸頁面</h3>
<div>
    <form action="">
        <input type="text" id="user">
        <input type="text" id="pwd">
        <input type="button" class="btn" value="登錄">
    </form>
    <span class="error" style="color: red"></span>
</div>

</body>
<script>
    $(".btn").click(function(){
        $.ajax({
            url:"/verify/",
            type: 'get',
            data:{
                'user':$("#user").val(),
                'pwd':$('#pwd').val()
            },
            success:function (data) {
                {#前端反序列化#}
                var ret=JSON.parse(data);
                if(ret.user){
                    {#若是成功跳轉到頁面#}
                    location.href='https://www.cnblogs.com/yxiaodao/'
                }
                {#若是不正確，提示信息#}
                else{
                    $('.error').text(ret.msg)
                }

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

文件上傳

文件上傳的兩種方式

基於form表單的文件上傳

基於Ajax的文件上傳

請求頭ContentType

ContentType指的是請求體的編碼類型，常見的類型共有3種：

一、application/x-www-form-urlencoded

這應該是最多見的 POST 提交數據的方式了。瀏覽器的原生 <form> 表單，若是不設置 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。請求相似於下面這樣（無關的請求頭在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=yuan&age=22

二、multipart/form-data

這又是一個常見的 POST 數據提交的方式。咱們使用表單上傳文件時，必須讓 <form> 表單的 enctype 等於 multipart/form-data。直接來看一個請求示例：

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

這個例子稍微複雜點。首先生成了一個 boundary 用於分割不一樣的字段，爲了不與正文內容重複，boundary 很長很複雜。而後 Content-Type 裏指明瞭數據是以 multipart/form-data 來編碼，本次請求的 boundary 是什麼內容。消息主體裏按照字段個數又分爲多個結構相似的部分，每部分都是以 --boundary 開始，緊接着是內容描述信息，而後是回車，最後是字段具體內容（文本或二進制）。若是傳輸的是文件，還要包含文件名和文件類型信息。消息主體最後以 --boundary-- 標示結束。關於 multipart/form-data 的詳細定義，請前往 rfc1867 查看。

這種方式通常用來上傳文件，各大服務端語言對它也有着良好的支持。

上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支持的，並且現階段標準中原生 <form> 表單也只支持這兩種方式（經過 <form> 元素的 enctype 屬性指定，默認爲 application/x-www-form-urlencoded。其實 enctype 還支持 text/plain，不過用得很是少）。

隨着愈來愈多的 Web 站點，尤爲是 WebApp，所有使用 Ajax 進行數據交互以後，咱們徹底能夠定義新的數據提交方式，給開發帶來更多便利。

三、application/json

application/json 這個 Content-Type 做爲響應頭你們確定不陌生。實際上，如今愈來愈多的人把它做爲請求頭，用來告訴服務端消息主體是序列化後的 JSON 字符串。因爲 JSON 規範的流行，除了低版本 IE 以外的各大瀏覽器都原生支持 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會趕上什麼麻煩。

JSON 格式支持比鍵值對複雜得多的結構化數據，這一點也頗有用。

基於form表單的文件上傳

視圖函數文件

def file_put(request):
    # 點擊以後form表單是post請求，加一個判斷
    if request.method=='POST':
        print(request.POST)
        print(request.FILES)
        user=request.POST.get('user')
        # # 文件對象的接受方式,沒有放在post中，而是放在了FILES中
        pic=request.FILES.get('pic')
        print(type(pic))
        # # 接收文件保存在本地，name是文件的一個屬性，能夠直接使用
        with open(pic.name,'wb') as f:
            for line in pic:
                f.write(line)
        return HttpResponse('OK')
    return render(request,'file_put.html')

模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>基於form表單的文件上傳</h3>
{#    上傳文件必定要用multipart/form-data#}
    <form action="" method="post" enctype="multipart/form-data">
        用戶名 <input type="text" name="user">
        頭像 <input type="file" name="pic">
{#        <input type="submit">#}
        <button type="submit">提交</button>
    </form>
</body>
</html>

Ajax發送json數據

上面的例子演示過服務端發送json數據到瀏覽器端

下面是瀏覽器端發送json到服務端

發送的json數據須要在request.body中提取

POST只能接受urlencodeed的數據

而且，不管發的是什麼格式，咱們均可以在body中提取到

基於Ajax的文件上傳

視圖文件代碼和上面用form表單同樣

網頁效果圖片

服務端接收到文件

模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <h3>基於form表單的文件上傳</h3>
    上傳文件必定要用multipart/form-data
    <form action="" method="post" enctype="multipart/form-data">
        用戶名 <input type="text" name="user">
        頭像 <input type="file" name="pic">
        <input type="submit">
{#        <button type="submit">提交</button>#}
    </form>

    <hr>

    <h3>基於AJAX文件上傳</h3>
    <form action="" method="post">
        用戶名 <input type="text" id="user">
        頭像 <input type="file" id="pic">
        <input type="button" CLASS="ajbtn" value="AJAX提交">
    </form>

</body>
<script>
    $('.ajbtn').click(function () {
        {#建立FormData對象#}
        console.log(123);
        var formdata=new FormData();
        formdata.append('user',$('#user').val());
        {#取文件格式的固定方法#}
        formdata.append('pic',$('#pic')[0].files[0]);

        $.ajax({
            url:'',
            type:'post',
            contentType:false,  //數據不作編碼
            processData:false, //數據不作預處理
            data:formdata,
            success:function (data) {
                console.log(data)
            }
        })
    })
</script>
</html>