利用html5 formdata技术将表单整个元素提交给另一个页面，异步刷新当前页面内容

此篇博文来源于我所做的项目，需要根据用户选择的不同，在当前界面根据用户的选择显示不同的信息。

下面给出demo：

js部分:

   <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);
                           document.getElementById("haha").innerHTML=xhr.responseText;  
                       }  
                   }  
                   xhr.open('post','****.php');  //相关的处理页面。
                   //使用FormData无需设置header头   
                   //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
                   xhr.send(fd);  
                   //阻止浏览器默认动作 跳转  
                   return false;  
               }  
           } 

    </script>

表单部分：

这里就不给出表单的内容，只给出提交按钮部分的代码：

<input type='submit' value='提交' onClick='init()'>//调用js中的函数，将表单内容传给另一个php页面进行处理。

<div id="haha"></div>//异步刷新的内容将显示在这个地方

亲测有效。