原理：
dom收集表單資訊，利用FormData快速收集表單資訊 ，執行個體化表單資料對象 同時收集fm的表單域資訊。
var fd = new FormData(fm); //執行個體化對象
alert(fd);
fd對象內部有收集的form表單域資訊
ajax傳遞表單資訊
1.靜態顯示頁面代碼
<!DOCTYPE html ><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">window.onload = function(){var fm = document.getElementsByTagName('form')[0];fm.onsubmit = function(){//利用FormData實現form表單資訊收集var fd = new FormData(fm);//fd 內部會把普通表單域 和 上傳檔案域 的資訊都收集//ajax傳遞表單資訊var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState==4){alert(xhr.responseText);}}//設定監聽事件ajax.upload.onprogressxhr.upload.onprogress = function(evt){//感知附件上傳情況,利用事件對象感知var loaded = evt.loaded;var total = evt.total;var per = Math.floor((loaded/total)*100)+"%";document.getElementById('son').innerHTML = per;document.getElementById('son').style.width = per;}xhr.open('post','./05.php');xhr.send(fd);return false;//組織瀏覽器提交}}</script><style type="text/css">#pat {width:430px;height:40px; border:5px solid blue;}#son {width:0;height:100%; background-color:lightblue;}</style></head><body><h2>ajax+FormData實現 無重新整理檔案上傳</h2><form method="post" action="" ><p>使用者名稱：<input type="text" name="username" /></p><p>密碼：<input type="password" name="password" /></p><p>郵箱：<input type="text" name="email" /></p><div id="pat"><div id="son"></div></div><p>頭像：<input type="file" name="user_pic" /></p><p><input type="submit" value="註冊" /></p></form></body></html>
2.php頁面代碼
伺服器儲存附件名字為本身名字
本地檔案------>上傳(php程式處理)------>伺服器
本地檔案名稱字的 字元集 gb2312
php程式的 字元集 utf-8--->gb2312 (在程式裡邊把utf-8編碼的附件名字 轉碼為 gb2312)伺服器的 字元集 gb2312
<?php//$_FILES['user_pic']['error']//0->ok 1->大小超過php.ini限制 2->大小超過MAX_FILE_SIZE限制 //3->附件只上傳了一部分(不完整) 4->沒有上傳附件if($_FILES['user_pic']['error']>0){exit('上傳附件有問題，有可能沒有附件');}//伺服器儲存附件名字為本身名字//本地檔案------>上傳(php程式處理)------>伺服器//本地檔案名稱字的 字元集 gb2312//php程式的 字元集 utf-8--->gb2312// (在程式裡邊把utf-8編碼的附件名字 轉碼為 gb2312)//伺服器的 字元集 gb2312$name = $_FILES['user_pic']['name'];$name = iconv('UTF-8','GB2312',$name); //$name的編碼由utf-8---變為--->gb2312$path = "./upload/";//附件上傳邏輯//move_uploaded_file(臨時路徑名，真實路徑名);if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))echo "success";elseecho "fail";
下面看下jQuery 將form表單通過ajax實現無重新整理提交的執行個體代碼。
代碼如下所示：
//將form轉換為AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, type:"post", data:dataPara, async:false, dataType:'txt', success:fn }); } //將form中的值轉換為索引值對 function getFormJson(frm){ var o={}; var a=$(frm).serializeArray(); $.each(a,function(){ if(o[this.name]!==undefined){ if(!o[this.name].push){ o[this.name]=[o[this.name]]; } o[this.name].push(this.value || ''); }else{ o[this.name]=this.value || ''; } }); return o; }/* //前台調用方式 function autoSubmitFun(){ ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){}); }*/
以上所述是小編給大家介紹的Ajax+FormData+javascript實現無重新整理表單資訊提交，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
