Ajax準(zhǔn)備知識：json
什么是json？
定義：
JSON(JavaScript Object Notation, JS 對象標(biāo)記) 是一種輕量級的數(shù)據(jù)交換格式。
它基于 ECMAScript (w3c制定的js規(guī)范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。
簡潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。
講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] // 不能使用十六進(jìn)制值
{ "name": "張三", "age": undefined } // 不能使用undefined
{ "name": "張三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函數(shù)和日期對象
}
stringify與parse方法
JSON.parse(): 用于將一個 JSON 字符串轉(zhuǎn)換為 JavaScript 對象
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ; // 錯誤
console.log(JSON.parse('[12,undefined]')) ; // 錯誤
JSON.stringify(): 用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串?！?eg: console.log(JSON.stringify({'name':"egon"})) ;
和XML的比較
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁瑣笨重的 XML 格式。
JSON 格式有兩個顯著的優(yōu)點：書寫簡單，一目了然；符合 JavaScript 原生語法，可以由解釋引擎直接處理，不用另外添加解析代碼。所以，JSON迅速被接受，已經(jīng)成為各大網(wǎng)站交換數(shù)據(jù)的標(biāo)準(zhǔn)格式，并被寫入ECMAScript 5，成為標(biāo)準(zhǔn)的一部分。
XML和JSON都使用結(jié)構(gòu)化方法來標(biāo)記數(shù)據(jù)，下面來做一個簡單的比較。
用XML表示中國部分省市數(shù)據(jù)如下：
<?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 簡單的語法格式和清晰的層次結(jié)構(gòu)明顯要比 XML 容易閱讀，并且在數(shù)據(jù)交換方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節(jié)約傳輸數(shù)據(jù)所占用得帶寬。
注意：
JSON格式取代了xml給網(wǎng)絡(luò)傳輸帶來了很大的便利,但是卻沒有了xml的一目了然,尤其是json數(shù)據(jù)很長的時候,我們會陷入繁瑣復(fù)雜的數(shù)據(jù)節(jié)點查找中。
但是國人的一款在線工具 BeJson 、SoJson在線工具讓眾多程序員、新接觸JSON格式的程序員更快的了解JSON的結(jié)構(gòu)，更快的精確定位JSON格式錯誤。
Ajax簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML）。
同步交互：客戶端發(fā)出一個請求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個請求；
異步交互：客戶端發(fā)出一個請求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個請求。
AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應(yīng)過程）
js實現(xiàn)的局部刷新:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color:red
}
</style>
</head>
<body>
<form class="Form">
<p>姓名 <input class="v1" type="text" name="username" mark="用戶名"></p>
<p>密碼 <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常見應(yīng)用情景
當(dāng)我們在百度中輸入一個“老”字后，會馬上出現(xiàn)一個下拉列表！列表中顯示的是包含“傳”字的4個關(guān)鍵字。
其實這里就使用了AJAX技術(shù)！當(dāng)文件框發(fā)生了輸入變化時，瀏覽器會使用AJAX技術(shù)向服務(wù)器發(fā)送一個請求，查詢包含“傳”字的前10個關(guān)鍵字，然后服務(wù)器會把查詢到的結(jié)果響應(yīng)給瀏覽器，最后瀏覽器把這4個關(guān)鍵字顯示在下拉列表中。
- 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
-
當(dāng)請求發(fā)出后，瀏覽器還可以進(jìn)行其他操作，無需等待服務(wù)器的響應(yīng)！
image.png
當(dāng)輸入用戶名后，把光標(biāo)移動到其他表單項上時，瀏覽器會使用AJAX技術(shù)向服務(wù)器發(fā)出請求，服務(wù)器會查詢名為zhangSan的用戶是否存在，最終服務(wù)器返回true表示名為lemontree7777777的用戶已經(jīng)存在了，瀏覽器在得到結(jié)果后顯示“用戶名已被注冊！”。
- 整個過程中頁面沒有刷新，只是局部刷新了；
- 在請求發(fā)出后，瀏覽器不用等待服務(wù)器響應(yīng)結(jié)果就可以進(jìn)行其他操作；
AJAX的優(yōu)缺點
優(yōu)點：
- AJAX使用Javascript技術(shù)向服務(wù)器發(fā)送異步請求；
- AJAX無須刷新整個頁面；
因為服務(wù)器響應(yīng)內(nèi)容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；
jquery實現(xiàn)的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增強(qiáng)的xhr
// textStatus: 請求完成狀態(tài)
// err: 底層通過throw拋出的異常對象，值與錯誤類型有關(guān)
console.log(arguments);
},
//=================== complete============
complete: function (jqXHR, textStatus) {
// jqXHR: jQuery增強(qiáng)的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參數(shù)
請求參數(shù)
######################------------data---------################
data: 當(dāng)前ajax請求要攜帶的數(shù)據(jù)，是一個json的object對象，ajax方法就會默認(rèn)地把它編碼成某種格式
(urlencoded:?a=1&b=2)發(fā)送給服務(wù)端；此外，ajax默認(rèn)以get方式發(fā)送請求。
function testData() {
$.ajax("/test",{ //此時的data是一個json形式的對象
data:{
a:1,
b:2
}
}); //?a=1&b=2
######################------------processData---------################
processData：聲明當(dāng)前的data數(shù)據(jù)是否進(jìn)行轉(zhuǎn)碼或預(yù)處理，默認(rèn)為true，即預(yù)處理；if為false，
那么對data：{a:1,b:2}會調(diào)用json對象的toString()方法，即{a:1,b:2}.toString()
,最后得到一個［object，Object］形式的結(jié)果。
######################------------contentType---------################
contentType：默認(rèn)值: "application/x-www-form-urlencoded"。發(fā)送信息至服務(wù)器時內(nèi)容編碼類型。
用來指明當(dāng)前請求的數(shù)據(jù)編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數(shù)據(jù)，
比如contentType:"application/json"，即向服務(wù)器發(fā)送一個json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,
b:33
}),
contentType:"application/json",
type:"POST",
}); //{a: 22, b: 33}
注意：contentType:"application/json"一旦設(shè)定，data必須是json字符串，不能是json對象
views.py: json.loads(request.body.decode("utf8"))
######################------------traditional---------################
traditional：一般是我們的data數(shù)據(jù)有數(shù)組時會用到 ：data:{a:22,b:33,c:["x","y"]},
traditional為false會對數(shù)據(jù)進(jìn)行深層次迭代；
響應(yīng)參數(shù)
/*
dataType： 預(yù)期服務(wù)器返回的數(shù)據(jù)類型,服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后，傳遞給回調(diào)函數(shù)。
默認(rèn)不需要顯性指定這個屬性，ajax會根據(jù)服務(wù)器返回的content Type來進(jìn)行轉(zhuǎn)換；
比如我們的服務(wù)器響應(yīng)的content Type為json格式，這時ajax方法就會對響應(yīng)的內(nèi)容
進(jìn)行一個json格式的轉(zhuǎn)換，if轉(zhuǎn)換成功，我們在success的回調(diào)函數(shù)里就會得到一個json格式
的對象；轉(zhuǎn)換失敗就會觸發(fā)error這個回調(diào)函數(shù)。如果我們明確地指定目標(biāo)類型，就可以使用
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) #元素直接轉(zhuǎn)成字符串a(chǎn)lexlittle alex
#return HttpResponse(dic) #字典的鍵直接轉(zhuǎn)成字符串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對象
設(shè)定dataType:"json"即可,相當(dāng)于告訴ajax方法把服務(wù)器返回的數(shù)據(jù)轉(zhuǎn)成json對象發(fā)送到前端.結(jié)果為object
當(dāng)然，
return HttpResponse(json.dumps(a),content_type="application/json")
這樣就不需要設(shè)定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實現(xiàn)的ajax
AJAX核心（XMLHttpRequest）
其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的。也就是說，我們只需要學(xué)習(xí)一個Javascript的新對象即可。
var xmlHttp = new XMLHttpRequest()；（大多數(shù)瀏覽器都支持DOM2規(guī)范）
注意，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題，給出下面方法來創(chuàng)建XMLHttpRequest對象：
function createXMLHttpRequest() {
var xmlHttp;
// 適用于大多數(shù)瀏覽器，以及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: 打開與服務(wù)器的連接（open方法）
當(dāng)?shù)玫絏MLHttpRequest對象后，就可以調(diào)用該對象的open()方法打開與服務(wù)器的連接了。open()方法的參數(shù)如下：
open(method, url, async)：
- method：請求方式，通常為GET或POST；
- url：請求的服務(wù)器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL后追加參數(shù)；
- async：這個參數(shù)可以不給，默認(rèn)值為true，表示異步請求；
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true);
步驟2: 發(fā)送請求
當(dāng)使用open打開連接后，就可以調(diào)用XMLHttpRequest對象的send()方法發(fā)送請求了。send()方法的參數(shù)為POST請求參數(shù)，即對應(yīng)HTTP協(xié)議的請求體內(nèi)容，若是GET請求，需要在URL后連接參數(shù)。
注意：若沒有參數(shù)，需要給出null為參數(shù)！若不給出null為參數(shù)，可能會導(dǎo)致FireFox瀏覽器不能正常發(fā)送請求！
xmlHttp.send(null);
步驟3: 接收服務(wù)器響應(yīng)
當(dāng)請求發(fā)送出去后，服務(wù)器端就開始執(zhí)行了，但服務(wù)器端的響應(yīng)還沒有接收到。接下來我們來接收服務(wù)器的響應(yīng)。
XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態(tài)發(fā)生變化時被調(diào)用。下面介紹一下XMLHttpRequest對象的5種狀態(tài)：
- 0：初始化未完成狀態(tài)，只是創(chuàng)建了XMLHttpRequest對象，還未調(diào)用open()方法；
- 1：請求已開始，open()方法已調(diào)用，但還沒調(diào)用send()方法；
- 2：請求發(fā)送完成狀態(tài)，send()方法已調(diào)用；
- 3：開始讀取服務(wù)器響應(yīng)；
- 4：讀取服務(wù)器響應(yīng)結(jié)束。
onreadystatechange事件會在狀態(tài)為1、2、3、4時引發(fā)。
下面代碼會被執(zhí)行四次！對應(yīng)XMLHttpRequest的四種狀態(tài)！
xmlHttp.onreadystatechange = function() {
alert('hello');
};
但通常我們只關(guān)心最后一種狀態(tài)，即讀取服務(wù)器響應(yīng)結(jié)束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態(tài)。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
alert('hello');
}
};
其實我們還要關(guān)心服務(wù)器響應(yīng)的狀態(tài)碼是否為200，其服務(wù)器響應(yīng)為404，或500，那么就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務(wù)器的狀態(tài)碼。
最后，我們還需要獲取到服務(wù)器響應(yīng)的內(nèi)容，可以通過XMLHttpRequest對象的responseText得到服務(wù)器響應(yīng)內(nèi)容。
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
};
if 發(fā)送POST請求
<1>需要設(shè)置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；注意 :form表單會默認(rèn)這個鍵值對不設(shè)定，Web服務(wù)器會忽略請求體的內(nèi)容。
<2>在發(fā)送時可以指定請求體了：xmlHttp.send(“username=yuan&password=123”)
JS實現(xiàn)ajax小結(jié)
/*
創(chuàng)建XMLHttpRequest對象；
調(diào)用open()方法打開與服務(wù)器的連接；
調(diào)用send()方法發(fā)送請求；
為XMLHttpRequest對象指定onreadystatechange事件函數(shù)，這個函數(shù)會在
XMLHttpRequest的1、2、3、4，四種狀態(tài)時被調(diào)用；
XMLHttpRequest對象的5種狀態(tài)，通常我們只關(guān)心4狀態(tài)。
XMLHttpRequest對象的status屬性表示服務(wù)器狀態(tài)碼，它只有在readyState為4時才能獲取到。
XMLHttpRequest對象的responseText屬性表示服務(wù)器響應(yīng)內(nèi)容，它只有在
readyState為4時才能獲取到！
*/
測試代碼：
<h1>AJAX</h1>
<button onclick="send()">測試</button>
<div id="div1"></div>
<script>
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多數(shù)瀏覽器
} 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 功能介紹
在注冊表單中，當(dāng)用戶填寫了用戶名后，把光標(biāo)移開后，會自動向服務(wù)器發(fā)送異步請求。服務(wù)器返回true或false，返回true表示這個用戶名已經(jīng)被注冊過，返回false表示沒有注冊過。
客戶端得到服務(wù)器返回的結(jié)果后，確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息！
7.2 案例分析
- 頁面中給出注冊表單；
- 在username表單字段中添加onblur事件，調(diào)用send()方法；
- send()方法獲取username表單字段的內(nèi)容，向服務(wù)器發(fā)送異步請求，參數(shù)為username；
- django 的視圖函數(shù)：獲取username參數(shù)，判斷是否為“yuan”，如果是響應(yīng)true，否則響應(yīng)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()函數(shù)用于序列化一組表單元素，將表單內(nèi)容編碼為用于提交的字符串。
serialize()函數(shù)常用于將表單內(nèi)容序列化，以便用于AJAX提交。
該函數(shù)主要根據(jù)用于提交的有效表單控件的name和value，將它們拼接為一個可直接用于表單提交的文本字符串，該字符串已經(jīng)過標(biāo)準(zhǔn)的URL編碼處理(字符集編碼為UTF-8)。
該函數(shù)不會序列化不需要提交的表單控件，這和常規(guī)的表單提交行為是一致的。例如：不在<form>標(biāo)簽內(nèi)的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。
與常規(guī)表單提交不一樣的是：常規(guī)表單一般會提交帶有name的按鈕控件，而serialize()函數(shù)不會序列化帶有name的按鈕控件。更多詳情請點擊這里。
語法
jQuery 1.0 新增該函數(shù)。
jQueryObject.serialize( )
返回值
serialize()函數(shù)的返回值為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>元素進(jìn)行序列化可以直接序列化其內(nèi)部的所有表單元素。
// 序列化<form>內(nèi)的所有表單元素
// 序列化后的結(jié)果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );
我們也可以直接對部分表單元素進(jìn)行序列化。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">
serialize()函數(shù)通常用于將表單內(nèi)容序列化，以便通過AJAX方式提交。
$("#btn").click( function(){
// 將當(dāng)前表單內(nèi)容以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)點就是我們可以異步上傳一個二進(jìn)制文件.
所有主流瀏覽器的較新版本都已經(jīng)支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
html
<h3>Ajax上傳文件</h3>
<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標(biāo)簽不要用在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
def index(request):
return render(request,"index.html")
def upload_file(request):
print("FILES:",request.FILES)
print("POST:",request.POST)
return HttpResponse("上傳成功!")
偽造Ajax上傳文件
iframe標(biāo)簽
<iframe> 標(biāo)簽規(guī)定一個內(nèi)聯(lián)框架。
一個內(nèi)聯(lián)框架被用來在當(dāng)前 HTML 文檔中嵌入另一個文檔。
示例：
<iframe src="http://www.baidu.com" width="1000px" height="600px"></iframe>
iframe+form
<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("上傳成功!")
