Django-Ajax進階

時間  2019-11-16
標籤 django ajax 進階 欄目 Python 简体版
原文   原文鏈接

1、Ajax上傳文件 

一、form表單上傳文件

文件和其餘的數據類型不同，是一個二進制的形式css

Form上傳文件的時候切記要加上：enctype="multipart/form-data"html

formupload.htmljquery

<!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">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<form action="/formupload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>姓名：<input type="text" name="username"></p>
    <p>密碼：<input type="password" name="password"></p>
    <p>頭像：<input type="file" name="file"></p>
    <p><input type="submit" value="提交"></p>
</form>

</body>
</html>

view.pyajax

def formupload(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        # file = request.FILES   #拿到的是一個句柄
        file_obj = request.FILES.get("file")
        print(file_obj,file_obj.name)
        print(type(file_obj),type(file_obj.name))   #<class 'django.core.files.uploadedfile.InMemoryUploadedFile'>   <class 'str'>
        with open(file_obj.name,"wb") as f:
            for i in file_obj:
                f.write(i)
        return HttpResponse("上傳成功...")
    return render(request,"formupload.html")

2、Ajax上傳文件（利用FormData）

FormData是什麼呢？django

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,咱們能夠經過JavaScript用一些鍵值對來模擬一系列表單控件,咱們還能夠使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件.json

全部主流瀏覽器的較新版本都已經支持這個對象了，好比Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+瀏覽器

要是使用FormData必定要加上：服務器

必定要加上：cookie

       contentType：false 
　　processDate：false #不作預處理app

ajaxupload.html

<h3>Ajax上傳文件</h3>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>
{#注意button標籤不要用在form表單中使用#}

<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];

        var formData=new FormData();
        formData.append("username",username);
        formData.append("upload_file_ajax",upload_file);


        $.ajax({
            url:"/upload_file/",
            type:"POST",
            data:formData,
            contentType:false,
            processData:false,

            success:function(){
                alert("上傳成功!")
            }
        });
    })
</script>

views.py

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

def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
return HttpResponse("上傳成功!")

三、僞造Ajax上傳文件

iframe標籤

<iframe> 標籤規定一個內聯框架。

一個內聯框架被用來在當前 HTML 文檔中嵌入另外一個文檔。

示例：

<iframe src="http://www.baidu.com" width="1000px" height="600px"></iframe>

iframe+form

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<h3>僞造Ajax上傳文件</h3>


<form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data">
    <p><iframe name="ifr" id="ifr"></iframe></p>
    <p><input type="file" name="upload_file"></p>
    <p><input type="text" name="user"></p>
    <input type="button" value="提交" id="submitBtn">
</form>

<script>

    $("#submitBtn").click(function(){

        $("#ifr").load(iframeLoaded);
        $("#form2").submit();

    });

    function iframeLoaded(){
        alert(123)
    }

</script>

views

def index(request):
 
    return render(request,"index.html")
 
def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
return HttpResponse("上傳成功!")

2、jQuery.serialize()

serialize()函數用於序列化一組表單元素，將表單內容編碼爲用於提交的字符串。

serialize()函數經常使用於將表單內容序列化，以便用於AJAX提交。

該函數主要根據用於提交的有效表單控件的name和value，將它們拼接爲一個可直接用於表單提交的文本字符串，該字符串已通過標準的URL編碼處理(字符集編碼爲UTF-8)。

該函數不會序列化不須要提交的表單控件，這和常規的表單提交行爲是一致的。例如：不在<form>標籤內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。

與常規表單提交不同的是：常規表單通常會提交帶有name的按鈕控件，而serialize()函數不會序列化帶有name的按鈕控件。更多詳情請點擊這裏。

語法：

jQuery 1.0 新增該函數

jQueryObject.serialize( )

serialize()函數的返回值爲String類型，返回將表單元素編碼後的可用於表單提交的文本字符串。

請參考下面這段初始HTML代碼：

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="張三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年級</option>
        <option value="2">二年級</option>
        <option value="3" selected="selected">三年級</option>
        <option value="4">四年級</option>
        <option value="5">五年級</option>
        <option value="6">六年級</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="點擊" />
</form>

對<form>元素進行序列化能夠直接序列化其內部的全部表單元素。

// 序列化<form>內的全部表單元素
// 序列化後的結果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

咱們也能夠直接對部分表單元素進行序列化。

// 序列化全部的text、select、checkbox表單元素
// 序列化後的結果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

serialize()函數一般用於將表單內容序列化，以便經過AJAX方式提交。

$("#btn").click( function(){

    // 將當前表單內容以POST請求的AJAX方式提交到"http://www.365mini.com"
    $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
        alert( "AJAX提交成功!" );       
    } );
        
} );

示例：

<!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">
    <title>Title</title>
</head>
<body>
<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="張三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年級</option>
        <option value="2">二年級</option>
        <option value="3" selected="selected">三年級</option>
        <option value="4">四年級</option>
        <option value="5">五年級</option>
        <option value="6">六年級</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="點擊" />
</form>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $("#btn").click(function () {
{#        方式一#}
        //$.ajaxSetup({
          // data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        //});
        $.ajax({
            url:"/serialize/",
            type:"POST",
{#            方式三#}
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            //data:$("form").serialize(),   //序列form表單全部的
            data:$(":text,:password,:checkbox").serialize(),  //序列本身選擇的
            success:function (data) {
                var data=JSON.parse(data);  //js中的反序列化
                console.log(data);
                console.log(typeof data);
                $(".error").html(data);
            }
        })
    })
</script>
</body>
</html>
serialize.html 
def serialize(request):
    # form = request.POST
    # print(form)
    name = request.POST.get("username")
    password = request.POST.get("password")
    checked = request.POST.getlist("hobby")
    print(name,password,checked)
return HttpResponse(json.dumps(name))

當有好多input的時候，就得一一對應的吧全部的數據發過去的，這樣顯得麻煩，咱們用序列化
jQuery.serialize()

data:$("form").serialize(),   //序列form表單全部的
data:$(":text,:password,:checkbox").serialize(),  //序列本身選擇的

在服務端獲取數據
form = request.POST   
print(form)   #獲取全部
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)#獲取單個
views.py

3、定時器：關於setTimeout

setTimeout(foo,3000)  # 3000表示3秒，foo表示一個函數，3秒後執行foo函數

<!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>Title</title>
    <style>
        .login_error{
            color: red;
        }
    </style>
</head>
<body>

<a href="/get_OK/">點擊</a><span class="error"></span>
<hr>
{% csrf_token %}
<p>姓名<input type="text"></p>
<p>密碼<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
    $(".Ajax_send").click(function () {
        function foo() {
             $(".login_error").html("");  //3秒後清空
        }
        //方式一
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
        });
        // ajax請求
        $.ajax({
            url:"/get_ajax/",  //請求路徑
            type:"POST",      //請求方式
            //吧js對象轉成json字符串
            data:{
{#                    方式三#}
{#                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),#}
                 name:$(":text").val(),
                 pwd:$(":password").val()
            },
            success:function (data) {
                var data=JSON.parse(data);  //js中的反序列化
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){   //爲False的狀況
                    $(".login_error").html("用戶名或者密碼錯誤");
                    setTimeout(foo,3000)
                }
            }
        })
    })
</script>
</body>
</html>

ajax的參數補充

　　 - type不寫的話默認是GET

　　 - dataType和ContentType：

　　　　dataType: 瀏覽器發給服務器但願返回的數據類型 。。若是咱們明確地指定目標類型，就能夠使用data Type。

　　　　ContentType:
　　　　　　請求頭裏有：瀏覽器告訴服務器內容的類型
　　　　　　響應頭裏也有：服務器響應瀏覽器的內容

JS和JQuery對象之間的轉換

　　jQuery對象加[0]就轉換成了dom對象
　　dom對象加$符就轉換成了jquery對象

processDate 默認爲True ，預處理；     若是改成False，不作預處理

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