Web框架開發-Ajax(formData)
1、回顧上節知識點css
一、什麼是json字符串？html
輕量級的數據交換格式jquery
二、定時器：關於setTimeoutajax
setTimeout(foo,3000) # 3000表示3秒，foo表示一個函數，3秒後執行foo函數json
<!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：cookie
dataType: 瀏覽器發給服務器但願返回的數據類型 。。若是咱們明確地指定目標類型，就可使用data Type。app
ContentType:
請求頭裏有：瀏覽器告訴服務器內容的類型
響應頭裏也有：服務器響應瀏覽器的內容dom
四、JS和JQuery對象之間的轉換
jQuery對象加[0]就轉換成了dom對象
dom對象加$符就轉換成了jquery對象
五、processDate 默認爲True ，預處理； 若是改成False，不作預處理
2、csrf跨站請求僞造
若是把type:"GET" 改成type:"POST" 會報一個Forbidden的錯
解決辦法有三種：
方式一：
$.ajaxSetup({
data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
});
注意：要放在ajax請求的前面，在發送以前組裝一組字符串，在第一步render的時候就發了
因此有侷限性：
若是把JS代碼放到靜態文件中，不會渲染，不會執行{{csrf_token}},只能在HTML頁面中使用
方式二：本身組裝一組鍵值對 （ 推薦）
<form>
{% csrf_token %}
</form>
data:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
name:$(":text").val(),
pwd:$(":password").val()
},
方式三：本身設置頭信息
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
$.ajax({
url:"/serialize/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
})
3、jQuery.serialize()
serialize()函數用於序列化一組表單元素，將表單內容編碼爲用於提交的字符串。
serialize()函數經常使用於將表單內容序列化，以便用於AJAX提交。
該函數主要根據用於提交的有效表單控件的name和value，將它們拼接爲一個可直接用於表單提交的文本字符串，該字符串已通過標準的URL編碼處理(字符集編碼爲UTF-8)。
該函數不會序列化不須要提交的表單控件，這和常規的表單提交行爲是一致的。例如：不在<form>標籤內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。
與常規表單提交不同的是：常規表單通常會提交帶有name的按鈕控件，而serialize()函數不會序列化帶有name的按鈕控件。更多詳情請點擊這裏。
語法：
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.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="myForm" action="http://www.365mini.com" method="post">
<p><input name="uid" type="hidden" value="1"></p>
<p><input name="username" type="text" value="張三"></p>
<p><input name="password" type="password" value="123456"></p>
<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.3.1.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",
data:$(":text,:password,:checkbox").serialize(),
success:function (data) {
var data = JSON.parse(data)
console.log(data);
console.log(typeof data)
$(".error").html(data);
}
})
})
</script>
</body>
</html>
views.py
def serialize(request):
name = request.POST.get('username')
password = request.POST.get('password')
checked = request.POST.getlist('hobby')
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)#獲取單個
4、上傳文件
一、Form表單上傳文件
文件和其餘的數據類型不同，是一個二進制的形式
Form上傳文件的時候切記要加上：enctype="multipart/form-data"
formupload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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>
views.py
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))
with open(file_obj.name, "wb") as f:
for i in file_obj:
f.write(i)
return HttpResponse("上傳成功....")
return render(request, "formupload.html")
二、Ajax上傳文件（利用FormData）：既能夠處理二進制，又能夠處理字典，列表啊等
FormData是什麼呢？
XMLHttpRequest Level 2添加了一個新的接口
FormData.利用FormData對象,咱們能夠經過JavaScript用一些鍵值對來模擬一系列表單控件,咱們還可使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優勢就是咱們能夠異步上傳一個二進制文件.
全部主流瀏覽器的較新版本都已經支持這個對象了，好比Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意：下文中的幾個須要解釋的
$("#upload") 拿到的是一個集合
$("#upload")[0] 就是一個dom對象
$("#upload")[0].files 拿到的是一個filelist
$("#upload")[0].files[0] 拿到的是當前最近的文件對象
要是使用FormData必定要加上：
必定要加上：
contentType：false
processDate：false #不作預處理
ajaxupload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>姓名：<input type="text" id="username" name="username"></p>
<p>頭像：<input type="file" id="avatar" name="avatar"></p>
<p><button class="btn">提交</button><span class="tishi"></span> </p>
<script src="../static/jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(".btn").click(function () {
var formData=new FormData();
formData.append("username", $(":text").val());
formData.append("avatar_img",$("#avatar")[0].files[0]);
$.ajax({
url:"/get_upload/",
type:"POST",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data:formData,
contentType:false, // 不設置內容類型
processData:false, // 不處理數據
success:function (data) {
$(".tishi").html("上傳成功")
}
}
)
})
</script>
</body>
</html>
views.py
def ajaxupload(request):
return render(request, "ajaxupload.html")
def get_upload(request):
if request.method == "POST":
print("FILE:", request.FILES)
file_obj = request.FILES.get("avatar_img")
print(file_obj, file_obj.name)
with open(file_obj.name, "wb") as f:
for i in file_obj:
f.write(i)
return HttpResponse("上傳成功")
相關文章
- 1. Web框架開發-web框架
- 2. 2019 web開發框架_2019年最佳Web開發框架
- 3. web開發框架詳解
- 4. Python web 開發框架 Pyramid
- 5. Flask框架web開發
- 6. web框架開發-Ajax
- 7. Web開發框架——Zheng
- 8. 開發框架-Web-.Net：NFine
- 9. Web開發框架趨勢
- 10. 移動web開發框架
- 更多相關文章...
- • ASP.NET Web Pages - 發佈網站 - ASP.NET 教程
- • Docker 架構 - Docker教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Web框架開發-web框架
- 2. 2019 web開發框架_2019年最佳Web開發框架
- 3. web開發框架詳解
- 4. Python web 開發框架 Pyramid
- 5. Flask框架web開發
- 6. web框架開發-Ajax
- 7. Web開發框架——Zheng
- 8. 開發框架-Web-.Net：NFine
- 9. Web開發框架趨勢
- 10. 移動web開發框架