Ajax+FormData+javascript实现无刷新表单信息提交
更新时间:2016年10月25日 10:01 点击:2351
原理:
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.onprogress xhr.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"; else echo "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实现无刷新表单信息提交,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12
- 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会,下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别,需要的朋友参考下...2016-02-21
- 这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-19
- 这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
- 这篇文章主要为大家详细介绍了jquery+Ajax实现简单分页条效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-17
- 今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上。...2015-03-15
- 这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27- 这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12
- 下面想就为大家带来一篇jquery ajax局部加载方法详解(实现代码)。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧...2016-05-14
- 这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16
- 使用Eclipse编辑jsp、js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,下面通过脚本之家平台给大家分享几种解决办法,需要的朋友参考下...2016-02-05
- 这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24
- 本文主要介绍了Ajax基本概念;Ajax的异步加载局部刷新功能的实现;通过XMLHttpRequest发送请求。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-19
- 这篇文章主要为大家详细介绍了原生js实现对Ajax的封装,模仿jquery,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-26
- 这篇文章主要介绍了js实现对ajax请求面向对象的封装的相关资料,需要的朋友可以参考下...2016-01-12
- 本文主要讲解AngularJS Ajax的知识,这里提供详细资料及代码示例,帮助学习AngularJS的朋友,有需要的小伙伴可以参考下...2016-08-24
jQuery ajax全局函数处理session过期后的ajax跳转问题
这篇文章主要介绍了基于jQuery的全局ajax函数处理session过期后的ajax操作的相关资料,需要的朋友可以参考下...2016-06-12