论坛首页 → Web前端技术论坛 →

Ajax在返回集合后，数据到复杂表格的应用

浏览 6120 次
锁定老帖子 主题：Ajax在返回集合后，数据到复杂表格的应用
精华帖 (0) :: 良好帖 (1) :: 新手帖 (8) :: 隐藏帖 (0)
作者 正文
  • 远去的渡口
  • 等级: 初级会员
  • 性别:
  • 文章: 112
  • 积分: 40
  • 来自: 上海转北京
   发表时间：2009-12-11   最后修改：2010-01-27

    通常， 我们无论是用普通Ajax机制还是利用框架，在处理返回的问题上，都会遇到这样的问题，如，我们要将一个List<Employee>集合的内容，插入到一个表格中，并且，表格的样式比较复杂，如果直接得到ajax的返回值，不做其他处理，那么我们在遍历这些值前，先要用js去拼接一个table，然后再循环将这些值加入到table表格中，这样，在遇到“” 时由于某些特殊情况，需要手动将“”改写成’’，这就增加了太多工作量，那么，有没有一个简单的方法呢，思考一下，当然是有了。

 

原理：

利用ajax发送请求后，在后台的控制服务中，仍加上forword，这里假设跳转到forward.jsp。和普通的servie一样，跳转到一个页面，这个页面就是一个DIV里套一个table，将这个List<Employee>用C：foreach标签遍历。然后，只需要在成功之后将xmlHttp.responseText 赋值到一个Div里面，而这个DIV正是包含forward.jsp.

 

以下是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);
}

 

 

 

 

 

 

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>

 

 

 

 

巧妙之处就在这里了，这样我们仍然可以用JSTL标签之类的表示方法，避免写这样的拼字符串：

 

 

 

 

 

 

var len=jsonObj.length;
	
	 var str='<table width="86%" border="0" cellpadding="0" cellspacing="1" bgcolor="#eae7db"><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;&nbsp;&nbsp;&nbsp;早餐</td></tr>';
	 var lunch='<tr class="tx_test"><td width="13%"class="regrist_title_12">&nbsp;&nbsp;&nbsp;&nbsp;午餐</td></tr>';
	 var dinner='<tr class="tx_test"><td width="13%"class="regrist_title_12">&nbsp;&nbsp;&nbsp;&nbsp;晚餐</td></tr>';
	 var dim='<tr class="tx_test"><td width="13%"class="regrist_title_12">&nbsp;&nbsp;&nbsp;&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>&nbsp;</td></tr> <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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>

今天附上一个简单的Demo,只是为了简单说明问题，我的表述是有点让人不好理解。

 

 

 

 

 

Demo写的很烂，请高手别将模式、重构砸下来批就OK。。。。

 

 

 
返回顶楼
         
  • kenee1314
  • 等级: 初级会员
  • 性别:
  • 文章: 11
  • 积分: 60
  • 来自: 杭州
   发表时间：2010-01-07  
没有说清楚！思路是好的
返回顶楼
          回帖地址
0 请登录后投票
  • sunrisetg
  • 等级: 初级会员
  • 性别:
  • 文章: 162
  • 积分: 60
  • 来自: 北京
   发表时间：2010-01-20  
把这部分完整的demo传上来看看
返回顶楼
          回帖地址
0 请登录后投票
  • 远去的渡口
  • 等级: 初级会员
  • 性别:
  • 文章: 112
  • 积分: 40
  • 来自: 上海转北京
   发表时间：2010-01-20  
sunrisetg 写道
把这部分完整的demo传上来看看

好的，晚上回去传，上次在家没事写了个最简单的servlet/JSP的Demo,到时把这个传上来好了。。。
返回顶楼
          回帖地址
0 请登录后投票
  • pengchhx
  • 等级: 初级会员
  • 性别:
  • 文章: 14
  • 积分: 30
  • 来自: 南京
   发表时间：2010-01-25  
请问楼主 如何在div上呈现后台数据
返回顶楼
          回帖地址
0 请登录后投票
  • 远去的渡口
  • 等级: 初级会员
  • 性别:
  • 文章: 112
  • 积分: 40
  • 来自: 上海转北京
   发表时间：2010-01-27  
pengchhx 写道
请问楼主 如何在div上呈现后台数据

为了回复你的问题，我又将帖子补充了一下。后台数据就是在forward.jsp页面里，在ajax的回调方法中加上：
document.getElementById(contentDivId).innerHTML = xmlHttp.responseText;
其中，contentDivId 就是index页面中的mydiv 的ID。

也就是index.js将forward.jsp里的内容InnerHTML完全赋到mydiv里了，xmlHttp.responseText其实就是forward.jsp页面里的内容。

返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics