在进行html5页面的设计时，希望用户加载完成页面后，进行交互时只改变其中的某些元素的内容，这样更像本地APP的呈现效果，但是HTML中的post、get如果使用submit进行提交的话会直接使用返回的内容刷新整个页面，这样有两个不好的地方：

1、返回的内容必须是整个页面都有的内容，但实际情况是仅仅需要改变页面中部分元素，这样就造成数据流量大，对服务器的性能有耗

2、用户能够明显感觉到页面在刷新，影响用户的体验

【解决方法】

使用JS进行表单的提交可以避免这个问题，js提交有如下好处

1、js可以只请求需要改变的信息内容，而不需要服务器返回其他，节省服务器的负担

2、Js不会刷新整个页面这样用户的体验也就好一点

【实现步骤】

页面功能如下:

点击一个按钮，切换到Home页签，同时加载home页面的内容

[html] view plain copy

 

 

1. <div id="home" class=“part”>  
2.     <h3>Home</h3>  
3.     <div id="targetlist">targetlist</div>  
4. </div>  
5.   
6. <div id="home_nav" class="nav_sub" onclick="getHome(‘home‘)">Home</div>  

js脚本如下：

[javascript] view plain copy

 

 

1. var ishomeneedchange = true // 全局变量当home页面的内容改变时才去查询数据库获取页面的值，否则不进行查询  
2. function getHome(id) {  
3.     if (ishomeneedchange) {  
4.         var xhr = new XMLHttpRequest();  
5.         xhr.onreadystatechange = function() {//服务器返回值的处理函数，此处使用匿名函数进行实现  
6.             if (xhr.readyState == 4 && xhr.status == 200) {//  
7.                 var responseText = xhr.responseText;  
8.                 document.getElementById(‘targetlist‘).innerHTML = responseText;  
9.             }  
10.         };  
11.         xhr.open("GET", "/wxroot/JS/home", true);//提交get请求到服务器  
12.         xhr.send(null)  
13.         ishomeneedchange = false  
14.     }  
15.     changeDisplay(id);//切换到home页签  
16.   
17. }  
18.   
19. //切换页签的实现函数  
20. function changeDisplay(id) {  
21.     nav_array = Array("uploadpart", "createclasspart", "createtargetpart", "home");  
22.     for (e in nav_array) {  
23.         if (nav_array[e] == id) {  
24.             document.getElementById(nav_array[e]).style.cssText = "display:block;";  
25.         } else {  
26.             document.getElementById(nav_array[e]).style.cssText = "display:none;";  
27.         }  
28.     }  
29. }  

js post