PHP使用HTML5 FormData對(duì)象提交表單操作示例
本文實(shí)例講述了PHP使用HTML5 FormData對(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ì)象
var fm = document.getElementById('formid');
var fd = new FormData(fm);
優(yōu)點(diǎn)：
（1）在以往的ajax做post請(qǐng)求時(shí)，當(dāng)提交的數(shù)據(jù)比較多時(shí)，需要拼接請(qǐng)求的字符串，如：k1=v1&k2=v2...，使用FormData對(duì)象時(shí)不需要這樣，可以節(jié)省工作量，也防止人為拼寫(xiě)錯(cuò)誤。
（2）FormData對(duì)象不僅可以讀取表單的數(shù)據(jù)，也可以自行追加數(shù)據(jù)
fd.append(name,value);
案例：
提交表單
效果圖：
文件結(jié)構(gòu)圖：
10-formdata.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FormData使用</title>
<link rel="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ù)的目的
*/
function send(){
var fm = document.getElementById('tform');
var fd = new FormData(fm);//創(chuàng)建FormData對(duì)象
var xhr = new XMLHttpRequest();//創(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 == 4 && this.status == 200){
document.getElementById('debug').innerHTML = this.responseText;
}
}
//說(shuō)明formdata對(duì)象不僅可以讀取表單的數(shù)據(jù)，也可以自行追加數(shù)據(jù)
fd.append('Single',false);
xhr.send(fd);//發(fā)送請(qǐng)求
}
</script>
<body>
<form id="tform">
用戶(hù)名：<input type="text" name="username"/><br/>
年齡：<input type="text" name="age"/><br/>
郵箱：<input type="text" name="email"/><br/>
性別：<input type="text" name="sex"/><br/>
<input type="button" value="ajax發(fā)送" onclick="send();"/>
</form>
<div id="debug"></div>
</body>
</html>
10-formdata.php文件：
<?php /** * 使用formData提交表單 * @author webbc */ print_r($_POST); ?>
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《php文件操作總結(jié)》、《PHP目錄操作技巧匯總》、《PHP常用遍歷算法與技巧總結(jié)》、《PHP數(shù)據(jù)結(jié)構(gòu)與算法教程》、《php程序設(shè)計(jì)算法總結(jié)》及《PHP網(wǎng)絡(luò)編程技巧總結(jié)》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
相關(guān)文章
Web開(kāi)發(fā)中，分頁(yè)設(shè)計(jì)必不可少。本文列舉了10個(gè)PHP分頁(yè)腳本，希望對(duì)你的web開(kāi)發(fā)會(huì)有幫助。 列表中大部分，提供演示和代碼下載。2011-08-08
用php來(lái)限制每個(gè)ip每天瀏覽頁(yè)面數(shù)量的實(shí)現(xiàn)思路
這篇文章主要介紹了用php來(lái)限制每個(gè)ip每天瀏覽頁(yè)面數(shù)量的實(shí)現(xiàn)思路,需要的朋友可以參考下2015-02-02
PHP對(duì)象相關(guān)知識(shí)總結(jié)
這篇文章主要介紹了PHP對(duì)象相關(guān)知識(shí)總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
php使用Jpgraph創(chuàng)建柱狀圖展示年度收支表效果示例
這篇文章主要介紹了php使用Jpgraph創(chuàng)建柱狀圖展示年度收支表效果,結(jié)合完整實(shí)例形式分析了Jpgraph創(chuàng)建柱狀圖的具體步驟與操作技巧,需要的朋友可以參考下2017-02-02
PHP數(shù)組去除重復(fù)項(xiàng)有個(gè)內(nèi)置函數(shù)array_unique()，但是php的array_unique函數(shù)只適用于一維數(shù)組，對(duì)多維數(shù)組并不適用，以下提供一個(gè)二維數(shù)組的array_unique函數(shù)。2011-07-07
基于magic_quotes_gpc與magic_quotes_runtime的區(qū)別與使用介紹
本篇文章小編為大家介紹，基于magic_quotes_gpc與magic_quotes_runtime的區(qū)別與使用介紹。需要的朋友參考下2013-04-04
php 上傳文件類(lèi)型判斷函數(shù)(避免上傳漏洞 )
php 判斷上傳類(lèi)型 避免上傳漏洞2010-06-06
在zblog首頁(yè)調(diào)用不同欄目的列表數(shù)據(jù)
這篇文章主要介紹了在zblog首頁(yè)調(diào)用不同欄目的列表數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
PHP棧的定義、入棧出棧方法及基于堆棧實(shí)現(xiàn)的計(jì)算器完整實(shí)例
這篇文章主要介紹了PHP棧的定義、入棧出棧方法及基于堆棧實(shí)現(xiàn)的計(jì)算器,結(jié)合實(shí)例形式較為詳細(xì)的分析了php定義與使用棧的基本方法,并結(jié)合完整實(shí)例形式給出了php基于堆棧實(shí)現(xiàn)高級(jí)計(jì)算器功能的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
PHP利用ChatGPT實(shí)現(xiàn)輕松創(chuàng)建用戶(hù)注冊(cè)頁(yè)面
ChatGPT?是?OpenAI?開(kāi)發(fā)的?GPT語(yǔ)言模型的變體，它是一種大型單向語(yǔ)言模型。本文就來(lái)利用ChatGPT創(chuàng)建簡(jiǎn)單的用戶(hù)注冊(cè)頁(yè)面，感興趣的可以了解一下2023-02-02