05-reg.html(传统方式收集表单数据):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.οnlοad= function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(event){
//① 收集全部的表单域信息
var nm = document.getElementById('username').value;
var pw = document.getElementById('userpwd').value;
var em = document.getElementById('useremail').value;
var info = "name="+nm+"&pwd="+pw+"&email="+em;
//② 利用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"); //post方式请求要加该请求头。
xhr.send(info);
event.preventDefault();//通过事件对象阻止浏览器默认动作
//return false;//阻止浏览器form表单的提交动作
}
}
</script>
</head>
<body>
<h2>无刷新方式form表单提交实现</h2>
<!--form表单的提交会使得浏览器页面跳转,是浏览器默认动作-->
<form method="post" action="./05.php">
<p>用户名:<input type="text" id="username" name="mingzi" /></p>
<p>密码:<input type="password" id="userpwd" name="mima" /></p>
<p>邮箱:<input type="text" id="useremail" name="youxiang" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>
055-reg.html(利用FormData收集表单数据):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
window.οnlοad= function(){
var fm = document.getElementsByTagName('form')[0];
fm.onsubmit = function(event){
//① 收集全部的表单域信息
// 利用FormData收集表单信息
// this关键字:代表事件元素节点对象本身
var fd = new FormData(this); //this就是fm。this可以换成fm。FormData是HTML5的新技术,用于收集表单数据(需要name属性值)。
//② 利用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"); //FormData不需要设置该请求头
xhr.send(fd); //FormData当做参数发送到服务端。
event.preventDefault();//通过事件对象阻止浏览器默认动作
//return false;//阻止浏览器form表单的提交动作
}
}
</script>
</head>
<body>
<h2>无刷新方式form表单提交实现(FormData优化表单信息收集)</h2>
<form method="post" action="./05.php">
<p>用户名:<input type="text" id="username" name="mingzi" /></p>
<p>密码:<input type="password" id="userpwd" name="mima" /></p>
<p>邮箱:<input type="text" id="useremail" name="youxiang" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>
05.php(后端服务器):
<?php
print_r($_POST);
//解析表单信息,连接数据库,拼装insert语句.......