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>