无刷新表单信息提交，使用HTML5新技术FormData

最新推荐文章于 2024-07-29 19:31:37 发布

BUS375

最新推荐文章于 2024-07-29 19:31:37 发布

阅读量2k

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/bbs375/article/details/52400619

版权

Ajax 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

利用新技术FormData表单数据对象，可以实现快速收集表单信息，FormData是html5的新技术，在主流浏览器都可以使用。

1.传统的不适用FormData Ajax无刷新表单提交方式（代码量多）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>ajax</title>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		window.onload = init;
		 function init(){
		 	var fm = document.getElementsByTagName('form')[0];
			fm.onsubmit = function(){
				//收集表单信息
				//ajax负责把收集好的信息传递给服务器
				var nm = document.getElementById('username').value;
				var pwd = document.getElementById('userpwd').value;
				var email = document.getElementById('useremail').value;
				var info = "name="+nm+"&pwd="+pwd+"&email="+email;
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4){
						alert(xhr.responseText);
					}
				}
				xhr.open('post','./04.php');
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(info);
				//阻止浏览器默认动作 跳转
				return false;
			}
		}
	</script>
</head>
<body>
<h2>Ajax无刷新收集表单并提交表单</h2>
<form>
	<p>用户名:<input type="text" id="username"></input></p>
	<p>密码:<input type="password" id="userpwd"></input></p>
	<p>邮箱:<input type="text" id="useremail"></input></p>
	<p><input type="submit" value="注册"></input></p>
</form>
</body>	
</html>

./04.php

<?php
//接收post方式传递过来的用户名信息，并做数据校验
print_r($_POST);
?>

2.利用FormData快速收集表单数据

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>ajax</title>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		window.onload = init;
		 function init(){
		 	var fm = document.getElementsByTagName('form')[0];
			fm.onsubmit = function(){
				//收集表单信息
				//ajax负责把收集好的信息传递给服务器
				var fd = new FormData(fm);

				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4){
						alert(xhr.responseText);
					}
				}
				xhr.open('post','./04.php');
				//使用FormData无需设置header头
				//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.send(fd);
				//阻止浏览器默认动作 跳转
				return false;
			}
		}
	</script>
</head>
<body>
<h2>Ajax无刷新收集表单并提交表单</h2>
<form>
	<p>用户名:<input type="text" name="username" id="username"></input></p>
	<p>密码:<input type="password" name="userpwd" id="userpwd"></input></p>
	<p>邮箱:<input type="text" name = "useremail" id="useremail"></input></p>
	<p><input type="submit" value="注册"></input></p>
</form>
</body>	
</html>

3.使用FormData注意：post方式无需使用setRequestHeader()设置header头，input输入框需加上name属性。

BUS375

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
无刷新表单信息提交，使用HTML5新技术FormData

利用新技术FormData表单数据对象，可以实现快速收集表单信息，FormData是html5的新技术，在主流浏览器都可以使用。1.传统的不适用FormData Ajax无刷新表单提交方式（代码量多） ajax window.onload = init; function init(){ var fm = document.getElementsBy
复制链接

扫一扫

专栏目录