JQuery基於FormData非同步提交資料檔案
web中資料提交事件是常常發生的,但是大多數情況下我們不希望使用html中的form表單提交,因為form表單提交會中斷當前瀏覽器的操作並且會調到另一個地址(即使這個地址是當前頁面),並且會重複載入一些html浪費頻寬,我們希望達到一個無重新整理的、非同步的提交效果來給使用者更好的體驗,這時候就要使用ajax,ajax可以不依賴表單自行發起一次http請求並且取回伺服器響應的資料,這就是ajax的簡便之處。我們這裡使用JQuery中封裝好的ajax函式,更加簡便。下面列舉幾個使用ajax非同步提交資料的方法。
一:jquery.js中的$.ajax方法
此方法依賴jquery.js外掛,有很多版本,可以自己下載。
我們需要在此$.ajax方法中指定一些引數,比如請求地址、請求型別、所需要傳輸的資料、請求成功後需要執行的操作,這裡簡略說一下。
$.ajax({ url:"你的url地址",type:'post',data:{key:'value'},success:function(){ alert('成功'); } })
這是$.ajax方法的簡單用法。其中引數data是你要傳輸的資料,這裡的data支援Json物件和字串。data資料如果是一個form表單裡面的,自己寫一個json很慢,可以使用jquery裡面的serizlize()方法。這個方法返回一個字串(每個form表單提交的時候也是轉化為相同格式的字串)。
$.ajax({ url:"你的url地址",data:$('form').serialize(),// "id=asdasd&s=000&name=1233" success:function(){ alert('成功'); } })
那麼,檔案也是這樣提交的嗎?
對於檔案的提交我們需要對$.ajax進行一些特殊的設定,並且使用FormData的物件。
<input type="file" name="f" id="f" multiple>
var fd = new FormData(); fd.append("name","bill"); fd.append("photo",$('#f')[0].files[0]); fd.append("photo2",$('#f')[0].files[1]); $.ajax({ url: '/webform1.aspx',type: 'post',processData: false,contentType: false,data: fd,success: function () { alert("ok") } })
我們建立一個fd物件並向其中新增鍵值對,這個值可以是一個檔案。$('#f')[0]是取出id=f的元素,至於為什麼是[0],這是因為jquery物件都有一個預設為0的索引用來取出其Dom元素,$('f')是一個jquery物件,[0]為Dom元素 可以用dom的所有屬性和方法。然後使用files來取出檔案。這裡我使用了files[0]和files[1],這是multiple可以上傳多個檔案我這裡上傳了兩個。
然後伺服器就可以接收檔案了,和表單一樣的接收方法。
當然可以把一個form直接轉化為一個FormData物件,這樣我們可以避免把所需內容一個個append到FormData裡面。
var fd = new FormData(document.querySelector("form")); fd.append("CustomField","This is some extra data"); $.ajax({ url: "stash.php",type: "POST",// 不處理資料 contentType: false // 不設定內容型別 });
使用append新增時formdata的key若已存在,則不能重複新增,會忽略本次append操作,這在對於使用經常需要表單取出值是相當不利的,所以建議使用set方法來新增新的key-value值,set的意思是修改一個已經存在的鍵值對,如果不存在的話就建立一個。即
fd.set("CustomField","This is some extra data");
$.ajax是主動事件,而我們希望當用戶點選按鈕才執行,這裡可以將$.ajax函式放在一個按鈕的click事件裡面,也可以使用下面的方法。
$('form').submit(function{ // 你自己的程式碼,一般是資料合法性驗證 $.ajax({ }); return false; })
submit函式可以在表單被提交時執行,我們可以用來將其作為執行$.ajax函式的觸發事件,然後使用return false來提前阻止這個表單的提交。
注意:有些文章裡說FormData的相容問題,FormData很早就提出來了。並且入股喲你想要使用jquery裡面的ajax來傳輸檔案就免不了使用它這是因為下面兩個方法也用到了FormData。當然原生的ajax有直接傳輸檔案的方法,感興趣的人可以看下。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。