ajax局部分页问题,怎么讲已获取的值显示在div表格中？

td736170287 2013-04-19 02:18:34

alert(url);
activeX.open("post",url,true);
activeX.onreadystatechange = callback;
activeX.send();
}
function callback(){
if(activeX.readyState == 4){
//alert(activeX.responseText);
parse(activeX.responseText);
}
}
function parse(msg){
var deptnos = msg.split("-");
for(var i=0; i<deptnos.length; i++){
var deptpros = deptnos[i].split(",");
var no = deptpros[0];
//alert(no);
var name = deptpros[1];
var loc = deptpros[2];
}

}//获取的信息
<div align="center" id="d1" ><table border="1">
<tr><td>编号</td><td>名字</td><td>地址</td></tr>
<c:forEach items="${requestScope.deptList}" var="dept">
<tr><td>${dept.deptno }</td><td>${dept.dname }</td><td>${dept.loc }</td></tr>
</c:forEach></table></div>

...全文

120 6 打赏收藏转发到动态举报

写回复

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

td736170287 2013-04-19

打赏
举报

回复

引用 3 楼 china_ssl 的回复:

一种是innerHTML就是document.getElementById("d1").innerHTML = "<table...</table>"; 还可以用var table = document.createElement("img"); document.getElementById("d1").appendChild(table);

我这个生成表格对么？

td736170287 2013-04-19

打赏
举报

回复

function parse(msg){ var deptnos = msg.split("-"); for(var i=0; i<deptnos.length; i++){ var deptpros = deptnos[i].split(","); var no = deptpros[0]; var name = deptpros[1]; var loc = deptpros[2]; document.getElementById("d1").innerHTML="<table border='1'>" +"<tr><td>编号</td><td>名字</td><td>地址</td></tr>" +"<tr><td>"+no+"</td><td>"+name+"</td><td>"+loc+"</td></tr>" +"</table>"; } } </script>为什么总是的到最后一条数据。。得不到其他的？

我自横刀香甜笑 2013-04-19

打赏
举报

回复

引用 3 楼 china_ssl 的回复:

一种是innerHTML就是document.getElementById("d1").innerHTML = "<table...</table>"; 还可以用var table = document.createElement("img"); document.getElementById("d1").appendChild(table);

这可行的。。

china_ssl 2013-04-19

打赏
举报

回复

一种是innerHTML就是document.getElementById("d1").innerHTML = "<table...</table>"; 还可以用var table = document.createElement("img"); document.getElementById("d1").appendChild(table);

td736170287 2013-04-19

打赏
举报

回复

你指的是用innerHTML拼成表格。。不行啊

rumlee 2013-04-19

打赏
举报

回复

使用innerHTML啊。

1．本书1~16章所附代码的运行环境操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：Microsoft Visual Studio 2005 数据库：SQL Server 2005 Web服务器：IIS 5.1及以上版本 2．本书17~27章所附代码的运行环境数据库采用MySQL 4.0及以上版本服务器采用Tomcat 5.0 及以上版本开发工具采用Eclipse 3.1以上版本 3．本书所附光盘范例第1章（/C01/） JsWeb 传统的JavaScript模式实现刷新 IframeWeb 基于框架的不刷新模式 AjaxWeb 基于Ajax的Web 2.0模式的刷新模式 AsyncAjaxSample Ajax异步调用的完整示例第2章（/C02/） 2.1.htm 3段JS使用形式 2.2.htm 不同浏览器使用“局部变量和全局变量的调用情况 3.4htm 引用数值型数据的例子 3.5.htm 数组使用的小例子 3.6.htm 一个字符串型转换为逻辑型数据的例子 3.7.htm 使用toLowerCase()方法进行转换的例子 3.8.htm 通过字符串类型来调用toLowerCase()方法 3.9.htm 对数字进行了复制、传递和比较 3.10.htm 复制、传递和比较一个对象 3.11.htm 对字符串进行比较第4章（/C04/） 4.1.htm 简单表达式的例子 4.2.htm 两个字符串进行加操作的实例 4.3.htm 减号的取反功能 4.4.htm 变量赋值的例子 4.5.htm 把表达式赋值给一个变量的方法 4.6.htm 演示了两个符号的区别 4.7.htm “!==”和“===”的演示 4.8.htm 逗号表达式的连接应用 4.9.htm 对表达式进行“Void”运算 4.10.htm typeof运算符的使用 4.11.htm 创建和删除对象的例子 4.12.htm 用delete移除了myArry的第二个元素 4.13.htm 用“()”改变运算优先级的例子 4.14.htm 一个运算符结合性的例子第5章（/C05/） 5.1.htm 一个最简单的条件语句 5.2.htm 检查变量x是否赋初值 5.3.htm if..else的使用情况 5.4.htm 一个用else进行更多选择的例子 5.5.htm 一个if语句嵌套的例子 5.6.htm 嵌套语句的另一种应用 5.7.htm 一个switch语句的应用 5.8.htm 利用while循环显示了一个6行的表格 5.9.htm while语句和do-while语句的循环实例 5.10.htm 显示了一个简易的九九乘法表 5.11.htm 用无限循环结构对上面乘法表的改写 5.12.htm 一个显示15以内奇数的程序 5.13.htm 一个函数定义的简单示例 5.14.htm 利用一个函数来显示对登录用户的问候 5.15.htm 定义了一个求阶乘的函数 5.16.htm JavaScript实现阶乘函数 5.17.htm 全局变量和局部变量的区别 5.18.htm 变量实例 5.19.htm 在函数内部使用arguments 5.20.htm 创建并使用动态函数的例子 5.21.htm URI编码处理函数的例子 5.22.htm 数值处理函数的例子 5.23.htm 一个isNaN方法应用的例子第6章（/C06/） 6.1.htm 简单对象的使用 6.2.htm 如何使用构造函数为对象实例增加属性和方法 6.3.htm 在网页上显示中文形式的日期 6.4.htm 将一个小数四舍五入到指定位数 6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8.htm Screen对象的使用 6.9.htm 用来检测浏览器窗口的实际大小 6.10.htm 可以设置文字大小随窗口大小而改变 6.11.htm 客户端性能检测 6.12.htm 个浏览器按键模拟的示例第7章（/C07/） 7.1.htm 演示了编码和译码使用的方法 7.2.htm 演示了exec方法的用法 7.3.htm 对RegExp对象的综合举例 7.4.htm 演示了字符匹配的使用情况 7.5.htm 正则匹配举例 7.6.htm 用 ^ 匹配目标字符串的开始位置 7.7.htm 用 $ 匹配目标字符串的结尾位置 7.8.htm 用 \b 匹配一个字边界第8章（/C08/） 8.1.htm XHTML中的事件绑定 8.2.htm 一个表单按钮的click处理器 8.3.htm 测试事件处理器的作用域 8.4.htm 绑定方法的使用 8.5.htm 使用一段文本来接收按键点击 8.6.htm 绑定处理器至对象 8.7.htm 网页中禁止鼠标右键的操作第9章（/C09/） 9.1.htm 实现了在网页上显示当前时间的功能 9.2.htm 一个显示当前日期和星期的完整示例 9.3.htm 同时显示日期、时间和星期 9.4.htm 一个分时段问候的例子 9.5.htm 实现了显示不同地区的时间代码 9.6.htm 实现悬浮时钟效果的完整代码 9.7.htm 计算器的完整程序 9.8.htm 可以进行四则混合运算的计算器 9.9.htm 打字效果 9.10.htm 实现图片的随机选择 9.11.htm 一个基本下拉菜单 9.12.htm 下拉菜单 9.13.htm 实现渐显效果的下拉菜单的完整代码 9.14.htm 模拟系统菜单 9.15.htm 图片显示窗口的完整代码 9.16.htm 远程控制窗口 9.17.htm 实现菜单滑动效果的完整代码 9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码第10章（/C10/） ReturnText Ajax返回字符串数据 ReturnXML Ajax读取XML类型数据 PostUser Ajax提交数据更新服务器内容 xmlhttpWeather 获取天气网站的内容第11章（/C11/） 11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中 11.2.htm 添加单元格 11.3.htm 删除表格的第一行和第一列 11.4.htm 实现单元格行顺序的改变 dynamicTable 完整的Ajax调用DOM的实例第12章（/C12/） 12.1.htm 一个在元素内定义CSS的范例 12.2.htm 一个在Head元素内定义CSS的范例 12.3.htm 引用CSS文件的页面 12.4.htm 通过下拉列表框来改变<div>容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果第13章（/C13/） 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml 一个雇员列表xml文件 13.2.xsl 一个XSL样式表的例子 13.3.htm Internet Explorer 浏览器中XML的应用 13.4.htm 直接对XML文档进行添加、删除和显示数据的操作 13.5.js Mozilla 浏览器中xml的应用 13.5.xml 简单的xml文件 13.6.htm 格式化输出xml文件 13.7.htm 一个添加/删除记录的例子第14章（/C14/） MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果数据库备份本章实例所需要的数据库第15章（/C15/） AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用Open Rico实现动态调色板 RicoDrag 使用Open Rico实现可拖拽的层 WebSitetestdojo 使用dojo组件实现卷帘效果的div隐藏第16章（/C16/）留言板源代码所有留言板实例的源代码数据库备份留言板数据所需要的数据库第17章（/ch17）程序描述：本章介绍开发AJAX的开源框架GWT（Google Web Toolkit）。最典型的Google Maps和Gmail等Google服务也正是基于此框架开发的。读者将能够快速掌握GWT的各种开发所涉及到的内容。 /firstgwt/FirstGWT.html 第一个GWT示例 /calculator/TexCalculator.html 个税计算器第18章（/ch18）程序描述：本章将介绍 GWT应用中高级应用的部分，包括各中组件和布局、如何发送XMLHttpRequest请求，以及如何解决浏览器历史记录问题等等，同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample.html 读取XML文件 /history/HistoryExample.html 保存历史记录 /rpc/RPCExample.html RPC调用第19章（/ch19）程序描述：本章模仿Google ig，使用Ajax技术实现一个个性化主页系统。通过拖拽方式设置主页，当完成拖拽窗口时，自动保存布局，使用户可以随时根据喜好来设置布局。 /login.jsp 登录页面 /homepage.jsp 自定义主页 /all.css CSS样式表文件 /js JavaScript脚本文件 /graphics 系统使用的图片文件夹第20章（/ch20）程序描述：本章使用Prototype封装的Ajax对象实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解文件传送情况。 /test.html 上传文件 /periodcal.jsp 上传文件后台处理页面 / prototype.js prototype框架类库文件第21章（/ch21）程序描述：本章将实现通过滑块来显示分页数据的功能。传统的分页方式，多数是通过单击按钮的方式来显示分页的。利用Ajax可以通过使用滑块的滑动来选择所显示的分页，这种拖拽的方式有很好的用户体验。 /test.html 滑动显示分页页面 /js JavaScript脚本文件 /img 系统使用的图片文件夹第22章（/ch22）程序描述：本章将利用开源框架Prototype，讲述如何在网页中实现Windows关机效果，使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件第23章（/ch23）程序描述：本章将使用Ajax技术实现动态获取数据的树状菜单。当展开菜单时，自动向服务器发送请求，查询该菜单下的子菜单，并在客户端显示子菜单，而无需刷新整个页面。 /simpleTree.jsp 简单树 /staticTree.jsp 静态树 /dynamicTree.jsp 动态树 /css/tree.css CSS样式表文件 /js/all.js JavaScript脚本文件 /images 图片文件第24章（/ch24）程序描述：本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时，自动保存到数据库。打开阅读RSS时，自动获取最新的RSS内容，而无需刷新页面。 /RSSReader.jsp RSS阅读器 /rss.js JavaScript脚本文件第25章（/ch25）程序描述：本章将仿照Google Suggest，使用Ajax技术实现动态获取搜索提示的功能。当输入搜索关键字时，自动向服务器发送请求，查询相关的关键字，并及时提示用户可输入的关键字。 /suggest.html 搜索提示 /ajax_search.js JavaScript脚本文件第26章（/ch26）程序描述：本章将使用Ajax技术实现无刷新即可浏览图片的相册。浏览图片时，自动向服务器发送请求，查询该类别下的照片，并显示到客户端。用户也可以根据喜好随时改变相册的风格。浏览相册的整个过程无需刷新页面。 / show.jsp 图片浏览 /all.js JavaScript脚本文件 /new.css CSS样式表文件 /styles.css CSS样式表文件 /images 图片文件第27章（/ch27）程序描述：本章将使用Ajax技术实现聊天室程序。使用Ajax来动态获取聊天记录，可以避免因屏幕不断刷新而出现的闪动现象。另外，使用Ajax可以减少服务器端的负荷，对这种客户端与服务器端通信量极大的程序是非常有意义的。对用户来讲，有很好地用户体验。 /welcome.jsp 聊天室欢迎页面 /room.jsp 聊天室页面 /ajax_chat.js JavaScript脚本文件 /styles.css CSS样式表文件

Web应用前端技术的探索与实践 1 1 前端开发那些事 1 2 怎样提高前端的质量和工作效率？ 1 附件（关于2011年工作的一点浅见） 3 3 探讨一些技术问题 4 3.1 Frameset和iframe 4 3.2 Frameset和Div两种方式的对比 5 3.2.1 frameset布局的优点 5 3.2.2 frameset布局的缺点 5 3.2.3 DIV传统布局与frameset相比的优点 5 3.2.4 DIV传统布局与frameset相比的缺点与解决办法 6 3.2.5 大量使用ajax的DIV局部页面，会遇到的一些难点 6 3.2.6 解决方法 6 3.2.7 结论 6 3.3 基于DIV的网页布局-模版的核心 7 3.3.1 概述 7 3.3.2 简单、直观的DIV布局 7 3.3.3 DIV布局问题的终极解决方案 9 3.3.4 解决DIV被撑爆的问题 12 3.3.4.1 DIV撑爆的问题 12 3.3.4.2 图片撑爆问题的解决办法 13 3.3.4.3 文字撑爆问题的解决办法 13 3.4 Java Web应用的DIV布局 14 4 主流邮件系统前端开发的研究 19 4.1 21cn企业邮 19 4.2 Sohu邮箱 21 4.3 网易邮箱 30 4.4 腾讯网络邮箱（foxmail） 40 4.5 新浪邮箱 47 4.6 关于邮箱业务的题外话 49 4.7 小结 51 5 一些应用的问题 51 5.1 21cn.com 51 5.2 综合管理平台 51 5.2.1 文件组织 51 5.2.2 UI 53 5.2.3 Jsp文件胡乱包含 53 6 前端组件及其研发的探索和实践 54 6.1 用户、应用 55 6.2 网站和web应用公共组件的层次 55 6.3 Web应用前端组件的研发原则 56 6.4 研发流程 56 6.5 常用前端组件的分析和研究 57 6.5.1 概述 57 6.5.2 通用组件 58 6.5.2.1 Accordion 58 6.5.2.1.1 效果 59 6.5.2.1.2 参数说明 60 6.5.2.2 Tab 61 6.5.2.2.1 效果 61 6.5.2.2.2 参数说明 64 6.5.2.2.3 事件说明 64 6.5.2.2.4 方法说明 65 6.5.2.2.5 属性说明 65 6.5.2.3 封装Accordion和Tab为Switchable 65 6.5.2.3.1 使用JQuery Tools构建 67 6.5.2.3.2 JQuery Tools的Switchable对Ajax的支持 68 6.5.2.3.3 使用JQuery Switchable 70 6.5.2.3.4 使用kissy Switchable 78 6.5.2.4 统计分析图表组件 94 6.5.2.4.1 应用实例1 95 6.5.2.4.2 应用实例2 97 6.5.2.5 DataGrid1-浏览表格数据 102 6.5.2.5.1 效果 103 6.5.2.5.2 参数说明 107 6.5.2.6 DataGrid2-可编辑cell 110 6.5.2.6.1 效果 110 6.5.2.7 DataGrid3-控制列是否显示 113 6.5.2.7.1 效果 113 6.5.2.8 Tree 116 6.5.2.8.1 效果1 116 6.5.2.8.2 效果2 117 6.5.2.9 树表组件 121 6.5.2.9.1 TABLETREE4J 121 6.5.2.9.2 JQuery TreeGrid 124 6.5.2.10 Combo扩展1-去除IE6下穿透层的bug 129 6.5.2.10.1 效果 130 6.5.2.11 Combo扩展2-新样式、可多选 131 6.5.2.11.1 效果 131 6.5.2.12 Combo扩展3-ComboGrid 134 6.5.2.12.1 效果 134 6.5.2.13 Combo扩展4-ComboTree 137 6.5.2.13.1 效果 137 6.5.2.14 日期-时间选择 139 6.5.2.14.1 基于JQuery EasyUI的日期选择组件 139 6.5.2.14.2 My97DatePicker 142 6.5.2.15 TimeSpinner 146 6.5.2.15.1 效果 146 6.5.2.15.2 应用 147 6.5.2.16 NumberSpinner 148 6.5.2.16.1 效果 148 6.5.2.17 MenuButton 149 6.5.2.17.1 效果 149 6.5.2.18 分页组件Pagination 151 6.5.2.18.1 效果 151 6.5.2.18.2 参数说明 152 6.5.2.19 文件上传组件 153 6.5.2.19.1 uploadify 153 6.5.2.19.2 swfUpload 159 6.5.2.20 消息提示、弹出广告组件 162 6.5.2.20.1 效果 162 6.5.2.20.2 方法说明 165 6.5.2.20.3 扩展说明 166 6.5.2.21 Panel组件 166 6.5.2.21.1 效果 166 6.5.2.21.2 参数说明 168 6.5.2.21.3 事件说明 169 6.5.2.21.4 方法说明 170 6.5.2.22 Window组件 170 6.5.2.22.1 效果 170 6.5.2.22.2 使用说明 172 6.5.2.23 Form数据验证 173 6.5.2.23.1 效果 173 6.5.2.24 内容自动完成、Suggest 174 6.5.2.24.1 效果 175 6.5.2.24.2 应用说明 176 6.5.2.25 WYSIWYG在线Html内容编辑器 179 6.5.2.25.1 SinaEditor 179 6.5.2.25.2 CKEditor 181 6.5.2.26 JMesa 184 6.5.2.26.1 效果 185 6.5.2.26.2 一个较为复杂的应用实例 185 6.5.3 综合实例 191 6.5.3.1 Portal 191 6.5.4 展望 195 7 前端页面的优化工作概论 195 7.1 前端页面优化的策略 196 7.2 网站加速的主要方法 198 7.2.1 Web层 198 7.2.2 应用层 203 8 总结 205

后端使用： SpringMVC + Mybatis + pageHelper分页插件；前端使用：freemarker模版、Jquery + ajax ；效果展示：核心要点想要实现前端页面局部刷新效果，首先在html中定义一个 div盒子，然后通过 ajax获取后端数据并使用jquery的empty()方法及append()方法将div中的数据清空并将新的数...

tymeleaf+ajax实现局部刷新，tymeleaf实现分页

springboot+thymeleaf+ajax局部刷新

81,091

社区成员

341,718

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章