PHP使用HTML5 FormData對(duì)象提交表單操作示例

第PHP使用HTML5FormData對(duì)象提交表單操作示例本文實(shí)例講述了PHP使用HTML5FormData對(duì)象提交表單操作。分享給大家供大家參考，具體如下：

這是HTML5中新增的一個(gè)Api，他能以表單對(duì)象作為參數(shù)，自動(dòng)的把表單的數(shù)據(jù)打包，當(dāng)ajax發(fā)送數(shù)據(jù)時(shí)，發(fā)送這個(gè)FormData對(duì)象，以達(dá)到發(fā)送表單數(shù)據(jù)的目的。

創(chuàng)建：

參數(shù)是一個(gè)form節(jié)點(diǎn)對(duì)象

varfm=document.getElementById('formid');

varfd=newFormData(fm);

優(yōu)點(diǎn)：

（1）在以往的ajax做post請(qǐng)求時(shí)，當(dāng)提交的數(shù)據(jù)比較多時(shí)，需要拼接請(qǐng)求的字符串，如：k1=v1k2=v2...，使用FormData對(duì)象時(shí)不需要這樣，可以節(jié)省工作量，也防止人為拼寫錯(cuò)誤。

（2）FormData對(duì)象不僅可以讀取表單的數(shù)據(jù)，也可以自行追加數(shù)據(jù)

fd.append(name,value);

案例：

提交表單

效果圖：

文件結(jié)構(gòu)圖：

10-formdata.html文件：

!DOCTYPEhtml

html

head

metacharset="utf-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

titleFormData使用/title

linkrel="stylesheet"href=""

/head

script

*FromData:表單數(shù)據(jù)對(duì)象

*這是HTML5中新增的一個(gè)Api

*他能以表單對(duì)象作為參數(shù)，自動(dòng)的把表單的數(shù)據(jù)打包

*當(dāng)ajax發(fā)送數(shù)據(jù)時(shí)，發(fā)送這個(gè)formData

*達(dá)到發(fā)送表單內(nèi)數(shù)據(jù)的目的

functionsend(){

varfm=document.getElementById('tform');

varfd=newFormData(fm);//創(chuàng)建FormData對(duì)象

varxhr=newXMLHttpRequest();//創(chuàng)建xhr對(duì)象

xhr.open('POST','10-formdata.php',true);//配置請(qǐng)求參數(shù)

//設(shè)置狀態(tài)回調(diào)函數(shù)

xhr.onreadystatechange=function(){

if(this.readyState==4this.status==200){

document.getElementById('debug').innerHTML=this.responseText;

//說明formdata對(duì)象不僅可以讀取表單的數(shù)據(jù)，也可以自行追加數(shù)據(jù)

fd.append('Single',false);

xhr.send(fd);//發(fā)送請(qǐng)求

/script

body

formid="tform"

用戶名：inputtype="text"name="username"/br/

年齡：inputtype="text"name="age"/br/

郵箱：inputtype="text"name="email"/br/

性別：inputtype="text"name="sex"/br/

inputtype="button"value="ajax發(fā)送"/

/form

divid="debug"/div

/body

/html