通常， 我们无论是用普通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"> 早餐</td></tr>';
var lunch='<tr class="tx_test"><td width="13%"class="regrist_title_12"> 午餐</td></tr>';
var dinner='<tr class="tx_test"><td width="13%"class="regrist_title_12"> 晚餐</td></tr>';
var dim='<tr class="tx_test"><td width="13%"class="regrist_title_12"> 点心</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>
今天附上一个简单的Demo,只是为了简单说明问题，我的表述是有点让人不好理解。
Demo写的很烂
，请高手别将模式、重构砸下来批就OK。。。。
分享到：
相关推荐
在Java EE（企业版Java）开发中，创建和绘制表格是一项常见的任务，特别是在构建Web应用程序时，例如报表系统、数据分析平台等。Java EE提供了一系列工具和技术来帮助开发者实现这一目标，使得表格不仅能够准确地...
.NET AJAX 分页控件是一种在Web应用程序中实现高效、流畅用户体验的重要工具，它允许用户在不重新加载整个页面的情况下获取更多的数据。这种无刷新分页技术显著提升了网页的交互性和性能，尤其对于处理大量数据的...
在本章中，我们将深入探讨EasyUI框架中的DataGrid组件，这是一个用于展示和操作表格数据的强大工具。DataGrid不仅依赖于Panel（面板）、Resizeable（调整大小）、LinkButton（按钮）和Pagination（分页）等组件，还...
在IT行业中，动态生成表格和实现分页是常见的前端数据展示技术，特别是在Web应用程序中。本项目"FaceTest"结合了后端存储过程、JSON数据格式以及前端的jQuery库，来实现这一功能。下面我们将详细探讨这三个关键组件...
在实际应用中，JavaScript的Table表格对象还可以结合Ajax实现异步数据加载，或者使用框架如jQuery、React、Vue等进行更复杂的表格操作。通过熟练掌握这些方法，开发者可以创建出交互性更强、功能更丰富的Web应用表格...
在现代Web应用开发中，数据可视化是至关重要的一个环节，它可以帮助用户更直观地理解复杂的数据。本项目结合了SpringBoot、MongoDB和Echarts这三个技术，构建了一个强大的数据可视化平台。下面将详细介绍这三个技术...
4. **数据展示**：获取到列表数据后，可以利用JavaScript和DOM操作将数据渲染到网页上，例如填充表格或者使用其他UI组件。 除了返回列表，DWR同样支持返回Map和Bean对象。在上述示例中，`User`是一个Java Bean对象...
8. **jquery[1].tablesorter排列.rar**：jQuery表格排序器插件，可以实现对HTML表格的列进行排序，Ajax可能用于在后台处理数据并返回排序后的结果。 9. **all-js-comasp.rar**：这可能是一个包含多种JavaScript组件...
当用户输入或选择条件后，jQuery会监听这些变化，然后使用Ajax请求向服务器发送查询参数，服务器根据这些参数返回匹配的数据，最后使用jQuery更新表格内容。 日期选择器是Web表单中常用的一种组件，它提供了一种...
- **JAVA 对象与 JS 对象的对接**：了解 DWR 如何实现 Java 和 JavaScript 之间的数据格式转换，这对于开发复杂的 AJAX 应用非常关键。 - **DWR 中的批赋值方法**：介绍如何使用 DWR 的批量赋值特性来优化数据传输...
在这个"DWR.rar_dwr"压缩包中，我们看到的是DWR在实际应用中的实例，涵盖了各种数据类型的处理，包括字符串、带参的字符串、数组、集合、Map以及循环Map和二维数组。 1. 字符串处理：在Web应用中，字符串是最基本的...
中的"达达AjaxPro实例集合"可能是整个实例集合的主目录或者是一个包含所有子实例的文件，这通常会包含多个子目录或文件，每个代表一个独立的AjaxPro应用场景，如登录验证、数据表格动态加载、异步表单提交等。...
在ASP.NET开发中，使用jQuery AJAX来传输和接收DataTable的数据可以极大地提高用户体验，因为它允许我们在不刷新整个页面的情况下更新表格内容。在传统的GridView控件中，每次添加、修改或删除一行都需要与服务器...
在本项目中，"EasyUI tree 及 DataGrid" 提到了两个核心组件：Tree 和 DataGrid，并且提到了与数据库和存储过程的交互，这通常涉及到后端开发技术，如 Asp.net 和 AJAX。 1. **EasyUI Tree**： EasyUI 的 Tree ...
总的来说，这个"Dwr源码示例"提供了一个学习DWR基本用法的平台，涵盖了从设置环境到实际调用Java方法的全过程，对于理解DWR如何在Web应用中工作，以及如何处理不同类型的数据，是非常有价值的。通过实践这个示例，你...
- **Create（创建）**：用户在表单中填写新数据，点击“保存”按钮，表单数据通过Form的submit方法发送到服务器，服务器处理后返回成功或失败信息。 - **Read（读取）**：Grid组件通过Store的load方法从服务器获取...
5. **服务器端逻辑**：在服务器端，接收AJAX请求并根据请求参数调整数据集的状态，可能需要更新父节点的展开状态，并返回新的子节点数据。 6. **客户端更新**：服务器响应后，使用JavaScript更新GridView的DOM结构...
DWR（Direct Web Remoting）框架是一个开源的Java库，它允许JavaScript在浏览器端与服务器端的Java对象进行交互，实现Ajax（异步JavaScript和XML）应用。DWR通过简化AJAX开发，使得前端和后端可以进行实时通信，提高...
- **查询数据**: 用户可以通过GridPanel的查询条件进行筛选，这些条件通过Ajax传递到后端，返回匹配的记录列表。 **4. 安全与优化** 在实际开发中，我们还需要考虑安全性问题，如防止SQL注入、XSS攻击等。同时，...