Django-Ajax

Ajax準備知識：json

什么是json煤伟？

定義：

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式癌佩。
它基于 ECMAScript (w3c制定的js規(guī)范)的一個子集木缝，采用完全獨立于編程語言的文本格式來存儲和表示數據。
簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言围辙。易于人閱讀和編寫我碟，同時也易于機器解析和生成，并有效地提升網絡傳輸效率姚建。
講json對象矫俺，不得不提到JS對象：

image.png

合格的json對象：

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

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

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

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

不合格的json對象：

{ 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;}    // 不能使用函數和日期對象
}

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

和XML的比較

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

JSON 格式有兩個顯著的優(yōu)點：書寫簡單贩虾，一目了然催烘；符合 JavaScript 原生語法，可以由解釋引擎直接處理缎罢，不用另外添加解析代碼伊群。所以，JSON迅速被接受策精，已經成為各大網站交換數據的標準格式湿镀，并被寫入ECMAScript 5舵盈，成為標準的一部分。

XML和JSON都使用結構化方法來標記數據，下面來做一個簡單的比較斩祭。

用XML表示中國部分省市數據如下：

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中國</name>
    <province>
        <name>黑龍江</name>
        <cities>
            <city>哈爾濱</city>
            <city>大慶</city>
        </cities>
    </province>
    <province>
        <name>廣東</name>
        <cities>
            <city>廣州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>臺灣</name>
        <cities>
            <city>臺北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>烏魯木齊</city>
        </cities>
    </province>
</country>

用JSON表示如下：

{
    "name": "中國",
    "province": [{
        "name": "黑龍江",
        "cities": {
            "city": ["哈爾濱", "大慶"]
        }
    }, {
        "name": "廣東",
        "cities": {
            "city": ["廣州", "深圳", "珠海"]
        }
    }, {
        "name": "臺灣",
        "cities": {
            "city": ["臺北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["烏魯木齊"]
        }
    }]
}

可以看到，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀烘跺，并且在數據交換方面闹击，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數據所占用得帶寬凹联。

注意：

JSON格式取代了xml給網絡傳輸帶來了很大的便利,但是卻沒有了xml的一目了然,尤其是json數據很長的時候,我們會陷入繁瑣復雜的數據節(jié)點查找中沐兰。
但是國人的一款在線工具 BeJson 、SoJson在線工具讓眾多程序員蔽挠、新接觸JSON格式的程序員更快的了解JSON的結構住闯，更快的精確定位JSON格式錯誤。

Ajax簡介

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”澳淑。即使用Javascript語言與服務器進行異步交互比原，傳輸的數據為XML（當然，傳輸的數據不只是XML）杠巡。

同步交互：客戶端發(fā)出一個請求后春寿，需要等待服務器響應結束后，才能發(fā)出第二個請求忽孽；
異步交互：客戶端發(fā)出一個請求后绑改，無需等待服務器響應結束谢床，就可以發(fā)出第二個請求。
AJAX除了異步的特點外厘线，還有一個就是：瀏覽器頁面局部刷新识腿；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）

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>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用戶名"></p>
    <p>密碼&nbsp;&nbsp;<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>

AJAX常見應用情景

當我們在百度中輸入一個“老”字后，會馬上出現一個下拉列表造壮！列表中顯示的是包含“傳”字的4個關鍵字渡讼。

其實這里就使用了AJAX技術！當文件框發(fā)生了輸入變化時耳璧，瀏覽器會使用AJAX技術向服務器發(fā)送一個請求成箫，查詢包含“傳”字的前10個關鍵字，然后服務器會把查詢到的結果響應給瀏覽器旨枯，最后瀏覽器把這4個關鍵字顯示在下拉列表中蹬昌。

整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已攀隔！
當請求發(fā)出后皂贩，瀏覽器還可以進行其他操作，無需等待服務器的響應昆汹！

image.png

當輸入用戶名后明刷，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發(fā)出請求满粗，服務器會查詢名為zhangSan的用戶是否存在辈末，最終服務器返回true表示名為lemontree7777777的用戶已經存在了，瀏覽器在得到結果后顯示“用戶名已被注冊映皆！”挤聘。

整個過程中頁面沒有刷新，只是局部刷新了劫扒；
在請求發(fā)出后檬洞，瀏覽器不用等待服務器響應結果就可以進行其他操作狸膏；

AJAX的優(yōu)缺點

優(yōu)點：

AJAX使用Javascript技術向服務器發(fā)送異步請求沟饥；
AJAX無須刷新整個頁面；
因為服務器響應內容不再是整個頁面湾戳，而是頁面中的局部贤旷，所以AJAX性能高；

jquery實現的ajax

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>

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

<script>
      //$.ajax的兩種使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


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

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增強的xhr
                        // textStatus: 請求完成狀態(tài)
                        // err: 底層通過throw拋出的異常對象砾脑，值與錯誤類型有關
                        console.log(arguments);
                    },

                 //=================== complete============

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery增強的xhr
                    // textStatus: 請求完成狀態(tài) success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意：后端模擬errror方式：HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

           })

       })

</script>
</body>
</html>

view：

import json,time
 
def index(request):
 
    return render(request,"index.html")
 
def handle_Ajax(request):
 
    username=request.POST.get("username")
    password=request.POST.get("password")
 
    print(username,password)
    time.sleep(10)
 
    return HttpResponse(json.dumps("Error Data!"))

$.ajax參數

請求參數

######################------------data---------################

       data: 當前ajax請求要攜帶的數據幼驶，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
             (urlencoded:?a=1&b=2)發(fā)送給服務端韧衣；此外盅藻，ajax默認以get方式發(fā)送請求购桑。

             function testData() {
               $.ajax("/test",{     //此時的data是一個json形式的對象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData：聲明當前的data數據是否進行轉碼或預處理，默認為true氏淑，即預處理勃蜘；if為false，
             那么對data：{a:1,b:2}會調用json對象的toString()方法假残，即{a:1,b:2}.toString()
             ,最后得到一個［object缭贡，Object］形式的結果。
            
######################------------contentType---------################

contentType：默認值: "application/x-www-form-urlencoded"辉懒。發(fā)送信息至服務器時內容編碼類型阳惹。
             用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2眶俩；如果想以其他方式提交數據莹汤，
             比如contentType:"application/json"，即向服務器發(fā)送一個json字符串：
               $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦設定仿便，data必須是json字符串体啰，不能是json對象

             views.py:   json.loads(request.body.decode("utf8"))


######################------------traditional---------################

traditional：一般是我們的data數據有數組時會用到 ：data:{a:22,b:33,c:["x","y"]},
              traditional為false會對數據進行深層次迭代；

響應參數

/*

dataType：  預期服務器返回的數據類型,服務器端返回的數據會根據這個值解析后嗽仪，傳遞給回調函數荒勇。
            默認不需要顯性指定這個屬性，ajax會根據服務器返回的content Type來進行轉換闻坚；
            比如我們的服務器響應的content Type為json格式沽翔，這時ajax方法就會對響應的內容
            進行一個json格式的轉換，if轉換成功窿凤，我們在success的回調函數里就會得到一個json格式
            的對象仅偎；轉換失敗就會觸發(fā)error這個回調函數。如果我們明確地指定目標類型雳殊，就可以使用
            data Type橘沥。
            dataType的可用值：html｜xml｜json｜text｜script
            見下dataType實例

*/

示例：

from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.

import json

def login(request):

    return render(request,'Ajax.html')


def ajax_get(request):

    l=['alex','little alex']
    dic={"name":"alex","pwd":123}

    #return HttpResponse(l)      #元素直接轉成字符串alexlittle alex
    #return HttpResponse(dic)    #字典的鍵直接轉成字符串namepwd
    return HttpResponse(json.dumps(l))
    return HttpResponse(json.dumps(dic))# 傳到前端的是json字符串,要想使用,需要JSON.parse(data)

//---------------------------------------------------
    function testData() {

        $.ajax('ajax_get', {
           success: function (data) {
           console.log(data);
           console.log(typeof(data));
           //console.log(data.name);
           //JSON.parse(data);
           //console.log(data.name);
                                     },
           //dataType:"json",
                            }
                       )}

注解:Response Headers的content Type為text/html,所以返回的是String;但如果我們想要一個json對象
    設定dataType:"json"即可,相當于告訴ajax方法把服務器返回的數據轉成json對象發(fā)送到前端.結果為object
    當然，
        return HttpResponse(json.dumps(a),content_type="application/json")

    這樣就不需要設定dataType:"json"了夯秃。
    content_type="application/json"和content_type="json"是一樣的座咆！

csrf跨站請求偽造

方式1

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

方式2

<form>
{% csrf_token %}
</form><br><br><br>$.ajax({<br>...<br>data:{
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();

}<br>})

方式3：

<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
 
headers:{"X-CSRFToken":$.cookie('csrftoken')},
 
})

JS實現的ajax

AJAX核心（XMLHttpRequest）

其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的仓洼。也就是說介陶，我們只需要學習一個Javascript的新對象即可。

var xmlHttp = new XMLHttpRequest()色建；（大多數瀏覽器都支持DOM2規(guī)范）

注意哺呜，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題箕戳，給出下面方法來創(chuàng)建XMLHttpRequest對象：

function createXMLHttpRequest() {
        var xmlHttp;
        // 適用于大多數瀏覽器某残，以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 適用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 適用于IE5.5国撵，以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

使用流程

步驟1: 打開與服務器的連接（open方法）

當得到XMLHttpRequest對象后，就可以調用該對象的open()方法打開與服務器的連接了玻墅。open()方法的參數如下：

open(method, url, async)：

method：請求方式卸留，通常為GET或POST；
url：請求的服務器地址椭豫，例如：/ajaxdemo1/AServlet耻瑟，若為GET請求，還可以在URL后追加參數赏酥；
async：這個參數可以不給喳整，默認值為true，表示異步請求裸扶；

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true);

步驟2: 發(fā)送請求
當使用open打開連接后框都，就可以調用XMLHttpRequest對象的send()方法發(fā)送請求了。send()方法的參數為POST請求參數呵晨，即對應HTTP協議的請求體內容魏保，若是GET請求，需要在URL后連接參數摸屠。

注意：若沒有參數谓罗，需要給出null為參數！若不給出null為參數季二，可能會導致FireFox瀏覽器不能正常發(fā)送請求檩咱！

xmlHttp.send(null);

步驟3: 接收服務器響應

當請求發(fā)送出去后，服務器端就開始執(zhí)行了胯舷，但服務器端的響應還沒有接收到刻蚯。接下來我們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件桑嘶，它會在XMLHttpRequest對象的狀態(tài)發(fā)生變化時被調用炊汹。下面介紹一下XMLHttpRequest對象的5種狀態(tài)：

0：初始化未完成狀態(tài)，只是創(chuàng)建了XMLHttpRequest對象逃顶，還未調用open()方法讨便；
1：請求已開始，open()方法已調用口蝠，但還沒調用send()方法器钟；
2：請求發(fā)送完成狀態(tài)津坑，send()方法已調用妙蔗；
3：開始讀取服務器響應；
4：讀取服務器響應結束疆瑰。
onreadystatechange事件會在狀態(tài)為1眉反、2昙啄、3、4時引發(fā)寸五。

下面代碼會被執(zhí)行四次梳凛！對應XMLHttpRequest的四種狀態(tài)！

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };

但通常我們只關心最后一種狀態(tài)梳杏，即讀取服務器響應結束時韧拒，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態(tài)十性。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其實我們還要關心服務器響應的狀態(tài)碼是否為200叛溢，其服務器響應為404，或500劲适，那么就表示請求失敗了楷掉。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態(tài)碼。

最后霞势，我們還需要獲取到服務器響應的內容烹植，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

if 發(fā)送POST請求

<1>需要設置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)愕贡；注意 :form表單會默認這個鍵值對不設定草雕，Web服務器會忽略請求體的內容。

<2>在發(fā)送時可以指定請求體了：xmlHttp.send(“username=yuan&password=123”)

JS實現ajax小結

/*
    創(chuàng)建XMLHttpRequest對象固以；
    調用open()方法打開與服務器的連接促绵；
    調用send()方法發(fā)送請求；
    為XMLHttpRequest對象指定onreadystatechange事件函數嘴纺，這個函數會在

    XMLHttpRequest的1败晴、2、3栽渴、4尖坤，四種狀態(tài)時被調用；

    XMLHttpRequest對象的5種狀態(tài)闲擦，通常我們只關心4狀態(tài)慢味。

    XMLHttpRequest對象的status屬性表示服務器狀態(tài)碼，它只有在readyState為4時才能獲取到墅冷。

    XMLHttpRequest對象的responseText屬性表示服務器響應內容纯路，它只有在
    readyState為4時才能獲取到！

*/

測試代碼：

<h1>AJAX</h1>
<button onclick="send()">測試</button>
<div id="div1"></div>


<script>
       function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();//大多數瀏覽器
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var div = document.getElementById("div1");
                    div.innerText = xmlHttp.responseText;
                    div.textContent = xmlHttp.responseText;
                }
            };

            xmlHttp.open("POST", "/ajax_post/", true);
            //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);  //post: xmlHttp.send("b=B");
        }


</script>
       
#--------------------------------views.py 
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')

@csrf_exempt   ＃csrf防御
def ajax_post(request):
    print('ok')
    return HttpResponse('helloyuanhao')

實例（用戶名是否已被注冊）

7.1　功能介紹
在注冊表單中寞忿，當用戶填寫了用戶名后驰唬，把光標移開后，會自動向服務器發(fā)送異步請求。服務器返回true或false叫编，返回true表示這個用戶名已經被注冊過辖佣，返回false表示沒有注冊過。

客戶端得到服務器返回的結果后搓逾，確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息卷谈！

7.2　案例分析

頁面中給出注冊表單；
在username表單字段中添加onblur事件霞篡，調用send()方法世蔗；
send()方法獲取username表單字段的內容，向服務器發(fā)送異步請求朗兵，參數為username凸郑；
django 的視圖函數：獲取username參數，判斷是否為“yuan”矛市，如果是響應true芙沥，否則響應false

參考代碼：

<script type="text/javascript">
        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    if(xmlHttp.responseText == "true") {
                        document.getElementById("error").innerText = "用戶名已被注冊！";
                        document.getElementById("error").textContent = "用戶名已被注冊浊吏！";
                    } else {
                        document.getElementById("error").innerText = "";
                        document.getElementById("error").textContent = "";
                    }
                }
            };
            xmlHttp.open("POST", "/ajax_check/", true, "json");
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var username = document.getElementById("username").value;
            xmlHttp.send("username=" + username);
        }
</script>

//--------------------------------------------------index.html

<h1>注冊</h1>
<form action="" method="post">
用戶名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/>
密　碼：<input type="text" name="password"/><br/>
<input type="submit" value="注冊"/>
</form>


//--------------------------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')
    # return HttpResponse('helloyuanhao')

@csrf_exempt
def ajax_check(request):
    print('ok')

    username=request.POST.get('username',None)
    if username=='yuan':
        return HttpResponse('true')
    return HttpResponse('false')

jQuery.serialize()

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

serialize()函數常用于將表單內容序列化找田，以便用于AJAX提交歌憨。

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

該函數不會序列化不需要提交的表單控件，這和常規(guī)的表單提交行為是一致的漆改。例如：不在<form>標簽內的表單控件不會被提交心铃、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交去扣、沒有被選中的表單控件不會被提交愉棱。

與常規(guī)表單提交不一樣的是：常規(guī)表單一般會提交帶有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>內的所有表單元素
// 序列化后的結果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

我們也可以直接對部分表單元素進行序列化。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: &quot;Courier New&quot; !important; font-size: 12px !important;">

serialize()函數通常用于將表單內容序列化，以便通過AJAX方式提交。

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

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

上傳文件

form表單上傳文件

html

<h3>form表單上傳文件</h3>


<form action="/upload_file/" method="post" enctype="multipart/form-data">
    <p><input type="file" name="upload_file_form"></p>
    <input type="submit">
</form>

view

def index(request):

    return render(request,"index.html")


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

Ajax(FormData)

FormData是什么呢荠锭？

XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優(yōu)點就是我們可以異步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了删豺，比如Chrome 7+呀页、Firefox 4+尘分、IE 10+缓窜、Opera 12+香罐、Safari 5+。