ajax无刷新方式收集表单并提交表单

ajax无刷新方式收集表单有两种方式，

一个是使用html5的FormData。一个是传统的方式。

一，FormData，在主流的浏览器中可以用，IE不好用啊。

另外，FormData使用有两个条件，第一，input里面需要有name属性；第二，不需要用到header头。

<script type="text/javascript">
    //给form表单制作一个提交事件onsubmit<br />
    window.onload = function(){
        var form = document.getElementsByTagName('form')[0];
          form.onsubmit = function(evt){
          //①利用FromData表单数据对象，快速搜集表单数据
         var fd = new FormData(form);
          //alert(info);
          //②ajax把收集好的信息传递给服务器
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function(){
              if(xhr.readyState==4){
                  alert(xhr.responseText);
              }
          };
          xhr.open('POST','register.php');
          //xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
          xhr.send(fd);
          //阻止浏览器默认动作
          evt.preventDefault();
          //return false;
      }
    }
     
</script>

二，传统方式。

<script type="text/javascript">
    //给form表单制作一个提交事件onsubmit<br />
    window.onload = function(){
        var form = document.getElementsByTagName('form')[0];
          form.onsubmit = function(evt){
          //①收集form表单信息
          
          var username = document.getElementById('username').value;
          var userpass = document.getElementById('userpass').value;
          var useremail = document.getElementById('useremail').value;
          
          var info = 'username='+username+'&userpass='+userpass+'&useremail='+useremail;//发送请求字符串
          //alert(info);
          //②ajax把收集好的信息传递给服务器
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function(){
              if(xhr.readyState==4){
                  alert(xhr.responseText);
              }
          };
          xhr.open('POST','register.php');
          xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
          xhr.send(info);
          //阻止浏览器默认动作
          evt.preventDefault();
          //return false;
      }
    }
     
</script>

另外，写一个form表单。

<form name="form">
        <p>用户名：<input type="text" name="username" id="username"/></p>
        <p>密码：<input type="password" name="userpass" id="userpass"/></p>
        <p>邮箱：<input type="text" name="useremail" id="useremail"/></p>
        <p><input type="submit" value="注册"/></p>
    </form>

传值到一个php文件

<?php 
    //搜集信息
    print_r($_POST);
?>

就这么简单。