首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
老郭博客-程序员客栈
文章模型
下载模型
首页
学
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
享
【享】文件
【享】工具
日记
Me
【Me】我
【Me】留言
首页
学
【学】前端
无刷新表单信息提交
无刷新表单信息提交
发布时间:
2年前
作者:
老郭
热度:
1420 ℃
评论数:
# 无刷新表单信息提交 > 利用新技术FormData 表单数据对象,可以实现快速收集表单信息。 FormData是html5的新技术,在主流浏览器都可以正常使用。 ------------ > 利用FormData实现快速收集表单信息: ```javascript <script type="text/javascript"> window.onload = function(){ //给form表单制作一个提交时间onsubmit var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ //1、利用FormData表单数据对象快速收集表单信息 //Form 使用注意:1、要求表单中必须加入name值 //2、不能设置setRequerHeader头 //3.特殊符号无需编码 var fd = new FormData(fm); //4、ajax负责把收集好的信息传递给服务器 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState==4) { alert(xhr.responseText); } } xhr.open('post','./05.php'); //xhr.setRequestHeader("content-type","application/x-www/form-urlencoded"); xhr.send(fd); //组织浏览器默认动作 evt.preventDefault();//事件对象阻止 // return false; } } </script> ``` > 老技术收集表单信息: ```javascript <script type="text/javascript"> window.onload = function(){ //给form表单制作一个提交时间onsubmit var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ //1、收集表单信息 var name = document.getElementsById('username').value; var pw = document.getElementsById('userpw').value; var em = document.getElementsById('useremail').value; var info = "name="+nm+"&pwd"+pw+"&email="+em; //2、ajax负责把收集好的信息传递给服务器 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState==4) { alert(xhr.responseText); } } xhr.open('post','./05.php'); xhr.setRequestHeader("content-type","application/x-www/form-urlencoded"); xhr.send(fd); //组织浏览器默认动作 evt.preventDefault();//事件对象阻止 // return false; } } </script> ``` > 表单: ```html <h2>无刷新方式上传附件(大附件进度条)</h2> <form> <p>用户名:<input type="text" name="mingzi" id="username"></p> <p>密码:<input type="password" name="mima" id="userpw"></p> <p>邮箱:<input type="text" name="youxiang" id="useremail"></p> <p><input type="submit" name="注册"></p> </form> ``` ------------ ### 使用FormData注意事项: > 1、每个表单域必须有 name 属性 2、在form标签里边无需设置 enctype="multipart/form-data" 属性(即使没有上传文件域也不需要设置) 3、Ajax 通过 post 方式传递 FormData 的数据不需要设置 setRequestHeader() 方法 4、普通表单域的特殊符号无需编码
无刷新,表单,信息
上一篇:
Json使用
下一篇:
使用Ajax中$.post方法前台获取json数据,将数据转换为对象
栏目导航
【学】PHP
【学】前端
【学】Linux
【学】杂学
【学】支付
【学】Docker
相关文章
Ajax是什么?
1252 ℃
网站禁止浏览器缓存
1315 ℃
Ajax之get方式请求
2781 ℃
Ajax之post方式请求
2210 ℃
Json使用
1211 ℃
无刷新表单信息提交
1420 ℃
使用Ajax中$.post方法前台获取json数据,将数据转换为...
1803 ℃
细说jQuery的选择器
1401 ℃
jQuery的属性操作
2159 ℃
jQuery快捷操作
1307 ℃
jQuery对象与dom对象关系
3071 ℃
jQuery的事件加载机制
1635 ℃
jQuery属性选择器使用
2232 ℃
jQuery基本动画效果
2574 ℃
利用Ajax技术实现天气预报接口
1472 ℃
微信小程序
手机扫码访问