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

来源：互联网发布：windows phone qq在线编辑：程序博客网时间：2024/06/02 05:13

利用新技术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属性。

0 0