jQuery中的FormData對(duì)象是一種新的數(shù)據(jù)傳輸方式,它可以通過(guò)AJAX無(wú)刷新的方式將表單中的數(shù)據(jù)傳輸至服務(wù)器端。同時(shí),它還可以實(shí)現(xiàn)文件上傳、進(jìn)度條等功能。
FormData對(duì)象的創(chuàng)建非常簡(jiǎn)單,只需要直接通過(guò)new FormData()來(lái)實(shí)現(xiàn),它可以接收一個(gè)form對(duì)象或者null作為參數(shù)。當(dāng)接收null參數(shù)時(shí),可以使用append()方法向FormData對(duì)象中添加需要提交的數(shù)據(jù)。
//創(chuàng)建FormData對(duì)象 var formData = new FormData($('form')[0]); formData.append('username', '張三'); formData.append('password', '123456'); //發(fā)送POST請(qǐng)求 $.ajax({ url: 'http://www.example.com/api/login', type: 'POST', data: formData, processData: false, contentType: false, success: function(data){ console.log(data); } });
在上述代碼中,我們首先通過(guò)new FormData($('form')[0])方式創(chuàng)建了一個(gè)FormData對(duì)象,并向其中添加了用戶名和密碼兩個(gè)字段的值。接著,我們通過(guò)$.ajax()方法向服務(wù)器端發(fā)送了一條POST請(qǐng)求,其中data參數(shù)的值為上面創(chuàng)建的formData對(duì)象。同時(shí),為了避免數(shù)據(jù)被解析成字符串,我們將processData設(shè)置為false,將contentType設(shè)置為false。
總的來(lái)說(shuō),F(xiàn)ormData對(duì)象在處理表單數(shù)據(jù)時(shí)非常方便,尤其是文件上傳時(shí)更是難以替代的一種方式。我們可以將一些表單元素的值、文件對(duì)象添加進(jìn)FormData對(duì)象中,隨后將其通過(guò)AJAX方式提交至后端,實(shí)現(xiàn)無(wú)刷新提交數(shù)據(jù)的功能。