Ajax+FormData+javascript实现无刷新表单信息提交
原理：
dom收集表单信息，利用FormData快速收集表单信息，实例化表单数据对象同时收集fm的表单域信息。
varfd=newFormData(fm);//实例化对象
alert(fd);
fd对象内部有收集的form表单域信息
ajax传递表单信息
1.静态显示页面代码
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript">
window.onload=function(){
varfm=document.getElementsByTagName('form')[0];
fm.onsubmit=function(){
//利用FormData实现form表单信息收集
varfd=newFormData(fm);
//fd内部会把普通表单域和上传文件域的信息都收集
//ajax传递表单信息
varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
//设置监听事件ajax.upload.onprogress
xhr.upload.onprogress=function(evt){
//感知附件上传情况,利用事件对象感知
varloaded=evt.loaded;
vartotal=evt.total;
varper=Math.floor((loaded/total)*100)+"%";
document.getElementById('son').innerHTML=per;
document.getElementById('son').style.width=per;
}
xhr.open('post','./05.php');
xhr.send(fd);
returnfalse;//组织浏览器提交
}
}
</script>
<styletype="text/css">
#pat{width:430px;height:40px;border:5pxsolidblue;}
#son{width:0;height:100%;background-color:lightblue;}
</style>
</head>
<body>
<h2>ajax+FormData实现无刷新文件上传</h2>
<formmethod="post"action="">
<p>用户名：<inputtype="text"name="username"/></p>
<p>密码：<inputtype="password"name="password"/></p>
<p>邮箱：<inputtype="text"name="email"/></p>
<divid="pat"><divid="son"></div></div>
<p>头像：<inputtype="file"name="user_pic"/></p>
<p><inputtype="submit"value="注册"/></p>
</form>
</body>
</html>
2.php页面代码
服务器保存附件名字为本身名字
本地文件------>上传(php程序处理)------>服务器
本地文件名字的字符集gb2312
php程序的字符集utf-8--->gb2312(在程序里边把utf-8编码的附件名字转码为gb2312)服务器的字符集gb2312
<?php
//$_FILES['user_pic']['error']
//0->ok1->大小超过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";
else
echo"fail";
下面看下jQuery将form表单通过ajax实现无刷新提交的实例代码。
代码如下所示：
//将form转换为AJAX提交
functionajaxSubmit(url,frm,fn){
vardataPara=getFormJson(frm);
$.ajax({
url:url,
type:"post",
data:dataPara,
async:false,
dataType:'txt',
success:fn
});
}
//将form中的值转换为键值对
functiongetFormJson(frm){
varo={};
vara=$(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||'';
}
});
returno;
}
/*
//前台调用方式
functionautoSubmitFun(){
ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
}
*/
以上所述是小编给大家介绍的Ajax+FormData+javascript实现无刷新表单信息提交，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！