Ajax+FormData+javascript实现无刷新表单信息提交

原理：
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实现无刷新表单信息提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！