Ajax--參數,csrf跨站請求偽造,serialize(),上傳文件formdata
阿新 • • 發佈：2017-11-15
chrome true multi 編碼格式 token static error res files 
https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js.
一:參數,processData,contentType,traditional,dataType
######################------------data---------################ data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式 (urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。 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"。發送信息至服務器時內容編碼類型。 用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數據， 比如contentType:"application/json"，即向服務器發送一個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對象 ######################------------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格式
的對象；轉換失敗就會觸發error這個回調函數。如果我們明確地指定目標類型，就可以使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
見下dataType實例
二:csrf跨站請求偽造:
方式一:這個方式只適合在本html裏,如果在外面引用js文件就沒效果.
$.ajaxSetup({ data: {csrfmiddlewaretoken: ‘{{ csrf_token }}‘ }, });
這個一定要在ajax前面加,不能在引用ajax之後.
方式二:
$(‘.index‘).click(function () { var ret = $(this).parent().prev().prev().prev().html(); $(this).parent().parent().addClass(‘yet‘); $.ajax({ url: ‘/index/‘, type: ‘POST‘, data: { csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(), name: ret }, success: function () { $(‘.yet‘).remove() } }) }) 在html的body裏面,還要再加上一行{%csrf_token%},缺一不可. 方式二用的比較多,在一般情況下用方式二就行,他可以跨html操作, 他的操作是在data裏面加上csrf,然後一起傳過去.如果方式二還不行那就只能用方式三View Code
$.ajax({ url:"/get_ajax/", type:"POST", headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, data:{ // csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(), name:$(":text").val(), pwd:$(":password").val(), } 導入後,然後在headers中傳入{"X-CSRFToken":$.cookie(‘csrftoken‘)} ,別問什麽,這是固定格式.View Code
方式三:
<script src="{% https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js %}"></script> $.ajax({ headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, }) 方式三,是從網上下載cookie,然後直接導入,在任何情況都使用,當然你也可以把他下載,再導入到static裏面,再用script導入.View Code
並且在後面ajax裏面要加上:headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}.這是固定格式
三: jQuery.serialize() :該函數用於序列化一組表單元素,將表單內容編碼為用於提交的字符串.
serialize()函數常用於將表單內容序列化，以便用於AJAX提交。
serialize()函數用於序列化一組表單元素，將表單內容編碼為用於提交的字符串。 serialize()函數常用於將表單內容序列化，以便用於AJAX提交。 該函數主要根據用於提交的有效表單控件的name和value，將它們拼接為一個可直接用於表單提交的文本字符串，該字符串已經過標準的URL編碼處理(字符集編碼為UTF-8)。
該函數不會序列化不需要提交的表單控件，這和常規的表單提交行為是一致的。例如：不在<form>標簽內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。
與常規表單提交不一樣的是：常規表單一般會提交帶有name的按鈕控件，而serialize()函數不會序列化帶有name的按鈕控件。
jQuery 1.0 新增該函數。
語法:
jQueryObject.serialize( )
應用:
$.ajax({ url:‘/new1/‘, type:‘POST‘, data:$("#fm").serialize(), success:function (data) { alert(data) } })
首先serialize是一定要在form表單中,他可以提交多個數據,但是在form表單中,不能用submit按鈕,
如果用了就不會走ajax.
註意:1,一定要在form表單中 2,按鈕不能是submit 3,如果是POST請求,在表單中要處理csrf_token.
我們也可以直接對部分表單元素進行序列化。
// 序列化所有的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方式提交。
四:上傳文件:
1:用form表單下載文件
html文件: <form method="post" enctype="multipart/form-data"> <p> <input type="file" name="v1"></p> <input type="submit" value="提交"> </form> 註意: 1,form下載,首先要在form中加上enctype="multipart/form-data" ,這句話, 這是固定模式 2,在input裏面type="file",是上傳文件格式.
views視圖函數裏: def get_file(request): if request.method=="post": print(request.POST) print(request.FILES) print(request.FILES.get(‘v1‘) files=request.FILES.get("v1") with open(files.name,‘wb‘) as f: for file in files.name: f.write(file) return Httpresponse(‘ok‘) return render(request,‘file.html‘) #這裏是print(request.POST)的結果 :<QueryDict: {‘csrfmiddlewaretoken‘: [‘8s7ugN31255049sIev2EXhPB3a6N9ME197YWpDanpVHZPHKLBHUACaKoxKi7MT6w‘]}> print(request.FILES)的結果<MultiValueDict: {‘files1‘: [<InMemoryUploadedFile: day72.txt (text/plain)>]}>
print(request.FILES.get(‘v1‘)的結果day72.txt.
2:formData
XMLHttpRequest Level 2添加了一個新的接口FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,
我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,
使用FormData的最大優點就是我們可以異步上傳一個二進制文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+
缺點:只支持主流瀏覽器.
formdata用法:
html裏: <form action="" id="s1"> <p>姓名<input type="text"></p> <p>密碼<input type="password"></p> <p>頭像<input type="file" id="upload_avatar"></p> </form> <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> 導入jsquery <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> #導入csrf模塊 $(".Ajax_send").click(function () { var formData=new FormData(); formData.append("username",$(":text").val()); formData.append("password",$(":password").val()); formData.append("avatar",$("#upload_avatar")[0].files[0]); // ajax請求 $.ajax({ url:"/get_ajax/", type:"POST", headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, #這是把csrf傳入服務器. data:formData, contentType:false, #這一句和下面一句是必須藥加上 processData:false, #和上面一句是一起的, success:function (data) { var data=JSON.parse(data); console.log(data); console.log(typeof data); })
Ajax--參數,csrf跨站請求偽造,serialize(),上傳文件formdata