使用jQuery和JSON动态添加表格
jQuery相信大家都有使用过,这个库对于程序的开发很有用,有时我们会把jQuery和xml结合起来,通过xml交换数据。实际应用中我们也可以使用JSON这种数据格式来进行数据的交换。要使用JSON就要先下载下面这6个开发包。为了防止出错这几个jar包也把他们放在tomcat的lib目录下面。这几个包在csdn上都可以找到,大家自己去下载就OK了。
如下图所示;
下载好之后拷贝在lib下面就可以了,如果有需要就放在构建路径下面。之后就可以开始操作了,这里会使用到servlet和jQuery交互。现在来写一下jsp页面,代码如下所示
- <?xml version="1.0" encoding="UTF-8" ?>
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#tijiao").click(function(){
- $.get("MyServlet",
- {username:'chenruiyin'},
- function(data,statusText){//相应函数
- var jsonvars=data.mydata;//返回JSON数据
- for(var i=0;i<jsonvars.length;i++)
- {
- $("#add").append("<td>"+jsonvars[i].name+"</td>");
- $("#add").append("<td>"+jsonvars [i].age+"</td>");
- }
- },"json");
- });
- });
- </script>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Insert title here</title>
- </head>
- <body>
- <input type="submit" id="tijiao" value="添加"/>
- <table border="1" id="table">
- <tr>
- <td>用户名</td>
- <td>年龄</td>
- </tr>
- <tr id="add">
- </tr>
- </table>
- </body>
- </html>
相关推荐
IT之家 2020-03-11
graseed 2020-10-28
zbkyumlei 2020-10-12
SXIAOYI 2020-09-16
jinhao 2020-09-07
impress 2020-08-26
liuqipao 2020-07-07
淡风wisdon大大 2020-06-06
yoohsummer 2020-06-01
chenjia00 2020-05-29
baike 2020-05-19
扭来不叫牛奶 2020-05-08
hxmilyy 2020-05-11
黎豆子 2020-05-07
xiongweiwei00 2020-04-29
Cypress 2020-04-25
冰蝶 2020-04-20