Linux教程網 >> Linux編程 >> Linux編程 >> 使用jQuery和JSON動態添加表格

使用jQuery和JSON動態添加表格

日期：2017/3/1 11:08:39 编辑：Linux編程

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>