web中數(shù)據(jù)提交事件是常常發(fā)生的，但是大多數(shù)情況下我們不希望使用html中的form表單提交，因?yàn)閒orm表單提交會(huì)中斷當(dāng)前瀏覽器的操作并且會(huì)調(diào)到另一個(gè)地址（即使這個(gè)地址是當(dāng)前頁(yè)面），并且會(huì)重復(fù)加載一些html浪費(fèi)帶寬，我們希望達(dá)到一個(gè)無(wú)刷新的、異步的提交效果來(lái)給用戶(hù)更好的體驗(yàn)，這時(shí)候就要使用ajax，ajax可以不依賴(lài)表單自行發(fā)起一次http請(qǐng)求并且取回服務(wù)器響應(yīng)的數(shù)據(jù)，這就是ajax的簡(jiǎn)便之處。我們這里使用JQuery中封裝好的ajax函數(shù)，更加簡(jiǎn)便。下面列舉幾個(gè)使用ajax異步提交數(shù)據(jù)的方法。

一：jquery.js中的$.ajax方法

此方法依賴(lài)jquery.js插件，有很多版本，可以自己下載。

我們需要在此$.ajax方法中指定一些參數(shù)，比如請(qǐng)求地址、請(qǐng)求類(lèi)型、所需要傳輸?shù)臄?shù)據(jù)、請(qǐng)求成功后需要執(zhí)行的操作，這里簡(jiǎn)略說(shuō)一下。

$.ajax({
    url:"你的url地址",
    type:'post',
    data:{key:'value'},
    success:function(){
      alert('成功')；
    }
  })

這是$.ajax方法的簡(jiǎn)單用法。其中參數(shù)data是你要傳輸?shù)臄?shù)據(jù)，這里的data支持Json對(duì)象和字符串。data數(shù)據(jù)如果是一個(gè)form表單里面的，自己寫(xiě)一個(gè)json很慢，可以使用jquery里面的serizlize()方法。這個(gè)方法返回一個(gè)字符串（每個(gè)form表單提交的時(shí)候也是轉(zhuǎn)化為相同格式的字符串）。

$.ajax({
    url:"你的url地址",
    type:'post',
    data:$('form').serialize(), // "id=asdasd&s=000&name=1233"
    success:function(){
      alert('成功')；
    }
  })

那么，文件也是這樣提交的嗎？

對(duì)于文件的提交我們需要對(duì)$.ajax進(jìn)行一些特殊的設(shè)置，并且使用FormData的對(duì)象。

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

我們創(chuàng)建一個(gè)fd對(duì)象并向其中添加鍵值對(duì)，這個(gè)值可以是一個(gè)文件。$('#f')[0]是取出id=f的元素，至于為什么是[0]，這是因?yàn)閖query對(duì)象都有一個(gè)默認(rèn)為0的索引用來(lái)取出其Dom元素，$('f')是一個(gè)jquery對(duì)象，[0]為Dom元素 可以用dom的所有屬性和方法。然后使用files來(lái)取出文件。這里我使用了files[0]和files[1]，這是multiple可以上傳多個(gè)文件我這里上傳了兩個(gè)。

然后服務(wù)器就可以接收文件了，和表單一樣的接收方法。

當(dāng)然可以把一個(gè)form直接轉(zhuǎn)化為一個(gè)FormData對(duì)象，這樣我們可以避免把所需內(nèi)容一個(gè)個(gè)append到FormData里面。

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
 url: "stash.php",
 type: "POST",
 data: fd,
 processData: false, // 不處理數(shù)據(jù)
 contentType: false  // 不設(shè)置內(nèi)容類(lèi)型
});

使用append添加時(shí)formdata的key若已存在，則不能重復(fù)添加，會(huì)忽略本次append操作，這在對(duì)于使用經(jīng)常需要表單取出值是相當(dāng)不利的，所以建議使用set方法來(lái)添加新的key-value值，set的意思是修改一個(gè)已經(jīng)存在的鍵值對(duì)，如果不存在的話(huà)就創(chuàng)建一個(gè)。即

fd.set("CustomField", "This is some extra data");
$.ajax是主動(dòng)事件，而我們希望當(dāng)用戶(hù)點(diǎn)擊按鈕才執(zhí)行，這里可以將$.ajax函數(shù)放在一個(gè)按鈕的click事件里面，也可以使用下面的方法。

$('form').submit(function{
  // 你自己的代碼，一般是數(shù)據(jù)合法性驗(yàn)證
$.ajax({ 
     
   });
   return false;
})

submit函數(shù)可以在表單被提交時(shí)執(zhí)行，我們可以用來(lái)將其作為執(zhí)行$.ajax函數(shù)的觸發(fā)事件，然后使用return false來(lái)提前阻止這個(gè)表單的提交。

注意：有些文章里說(shuō)FormData的兼容問(wèn)題，F(xiàn)ormData很早就提出來(lái)了。并且入股喲你想要使用jquery里面的ajax來(lái)傳輸文件就免不了使用它這是因?yàn)橄旅鎯蓚€(gè)方法也用到了FormData。當(dāng)然原生的ajax有直接傳輸文件的方法，感興趣的人可以看下。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論