通常， 我們無論是用普通Ajax機制還是利用框架，在處理返回的問題上，都會遇到這樣的問題，如，我們要將一個List<Employee>集合的內容，插入到一個表格中，並且，表格的樣式比較複雜，如果直接得到ajax的返回值，不做其他處理，那麼我們在遍歷這些值前，先要用js去拼接一個table，然後再循環將這些值加入到table表格中，這樣，在遇到“” 時由於某些特殊情況，需要手動將“”改寫成’’，這就增加了太多工作量，那麼，有沒有一個簡單的方法呢，思考一下，當然是有了。
原理：
利用ajax發送請求後，在後臺的控制服務中，仍加上forword，這裏假設跳轉到forward.jsp。和普通的servie一樣，跳轉到一個頁面，這個頁面就是一個DIV裏套一個table，將這個List<Employee>用C：foreach標籤遍歷。然後，只需要在成功之後將xmlHttp.responseText 賦值到一個Div裏面，而這個DIV正是包含forward.jsp.
- var len=jsonObj.length;
- var str='<table width="86%" border="0" cellpadding="0" cellspacing="1" bgcolor="#eae7db"& gt;<tr><td bgcolor="#FFFFFF">< table width="100%" border="0" cellspacing="0" cellpadding="3">< tr class="tx_test"><td width="3%" height="5"></td>< td width="13%"></td><td width="21%"></td>< td width="21%"></td><td width="21%"></td>< td width="21%"></td></tr><tr class="tx_test">< td width="13%" class="regrist_title_12"> & nbsp; 早餐</td></tr>';
- var lunch='<tr class="tx_test"& gt;<td width="13%"class="regrist_title_12"> & amp;nbsp; 午餐</td></tr>';
- var dinner='<tr class="tx_test"& gt;<td width="13%"class="regrist_title_12"> & amp;nbsp; 晚餐</td></tr>';
- var dim='<tr class="tx_test"& gt;<td width="13%"class="regrist_title_12"> & amp;nbsp; 點心</td></tr>';
- for(var i=0;i<len;i++){
- var food=jsonObj[i];
- var kind=food.userFoodKind;
- var foodArea=food.foodArea;
- var name=food.foodName;
- var unit=food.foodBasicUnit;
- var mete=food.basicmete;
- var caloriesimple=food.caloriesimple;
- if(/^[0-9]+$/.test(caloriesimple)){
- caloriesimple=caloriesimple+".0";
- }
- var share=food.userfoodshare;
- var total=food.calorieTotal;
- if(/^[0-9]+$/.test(total)){
- total=total+".0";
- }
- var graphURL=food.graphURL;
- var sharemete=food.sharemete;
- if(/^[0-9]+$/.test(sharemete)){
- sharemete=sharemete+".0";
- }
- var areas="";
- if(foodArea!=""){
- if(foodArea=="cn"){
- areas="中國大陸";
- }else if(foodArea=="tw"){
- areas="臺灣";
- }else {
- areas="歐美";
- }
- // name=name +" ("+areas+")";
- }
- if(kind==1) {
- str+='<tr><td width="13%" class="regrist_title_12"></td><td width="21%">'+name+'</td><td width="21%">'+areas+'</td><td width="21%">'+sharemete +unit+'</td><td width="21%">'+caloriesimple+'大卡</td></tr>';
- }
- if(kind==2){
- lunch+='<tr><td width="13%" class="regrist_title_12"></td><td width="21%">'+name+'</td><td width="21%">'+areas+'</td><td width="21%">'+sharemete +unit+'</td><td width="21%">'+caloriesimple+'大卡</td></tr>';
- }
- if(kind==3){
- dinner+='<tr><td width="13%" class="regrist_title_12"></td><td width="21%">'+name+'</td><td width="21%">'+areas+'</td><td width="21%">'+sharemete +unit+'</td><td width="21%">'+caloriesimple+'大卡</td></tr>';
- }if(kind==4){
- dim+='<tr><td width="13%" class="regrist_title_12"></td><td width="21%">'+name+'</td><td width="21%">'+areas+'</td><td width="21%">'+sharemete +unit+'</td><td width="21%">'+caloriesimple+'大卡</td></tr>';
- }
- }
- var coms="<tr></tr></table></td></tr></table></td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table>"
- // alert("div="+div);
- if(typeof total == "undefined" ){
- total="0.0";
- }
- // alert("total="+total);
- var im=document.getElementById("grap");
- document.getElementById("grap").src=graphURL;
- // alert("tolid="+tolid);
- document.getElementById(tolid).innerHTML=total;
- document.getElementById(div).innerHTML=str+lunch+dinner+dim+coms;
- // alert(str+lunch+dinner+dim+coms);
- }
（這是最初的做法，很頭疼的，也很麻煩，因爲這裏的table樣式實在複雜，所以要自己拼接N多<td class=""> 之類，因爲在JS裏面，‘’與“”的用法問題，所以要手動改寫很多地方，其實複雜就在這裏了。所以本方案就是避開再這樣拼接<xxx class="" style]""> 之類的，所以採取直接將後臺的數據寫在一個Jsp中，然後在主頁面，用這一句：
document.getElementById(contentDivId).innerHTML = xmlHttp.responseText;
如這裏的index.js將forward.jsp裏的內容InnerHTML完全賦到mydiv裏了。這樣看很明白了吧， xmlHttp.responseText其實就是forward.jsp頁面裏的內容）
<div id="mydiv" style="width: 400px;height: 400px;border: 1px;border-style: solid;">
讀取的內容會在這裏顯示！！
</div>
forward.jsp中則是顯示後臺數據，很普通的，
- <body>
- <div id="report" style="width: 400px;">
- <table border="1" style="border-style: solid;width: 98%;">
- <c:forEach items="${users}" var="user">
- <tr>
- <td>${user.name }</td>
- <td>${user.age }</td>
- <td>${user.interest }</td>
- </tr>
- </c:forEach>
- </table>
- </div>
- </body>
<body>
<div id="report" style="width: 400px;">
<table border="1" style="border-style: solid;width: 98%;">
<c:forEach items="${users}" var="user">
<tr>
<td>${user.name }</td>
<td>${user.age }</td>
<td>${user.interest }</td>
</tr>
</c:forEach>
</table>
</div>
</body>
巧妙之處就在這裏了，這樣我們仍然可以用JSTL標籤之類的表示方法，避免寫這樣的拼字符串：
以下是js文件中代碼：
- function GetXmlHttpObject() {
- var xmlHttp = null;
- try {
- // Firefox, Opera 8.0+, Safari
- xmlHttp = new XMLHttpRequest();
- }
- catch (e) {
- // Internet Explorer
- try {
- xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e) {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- return xmlHttp;
- }
- function stateChanged(xmlHttp, contentDivId) {
- if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
- document.getElementById(contentDivId).innerHTML = xmlHttp.responseText;
- }
- }
- function getContent(url, cotentdivId) {
- var xmlHttp=null;
- xmlHttp = GetXmlHttpObject();
- if (xmlHttp == null) {
- alert("can't get ajax object!");
- return;
- }
- xmlHttp.onreadystatechange = function () {
- stateChanged(xmlHttp, cotentdivId);
- };
- xmlHttp.open("GET", url, true);
- xmlHttp.send(null);
- }