使用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>

使用的时候千万不要忘了把jquery的开发包导入到页面，要不死都不会成功的，还记着不要漏写了$(document).ready，否则什么效果都看不到。servlet代码如下所示，这个servlet的映射路径是根目录。

package bao1;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;  
import net.sf.json.JSONObject;  
public class MyServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public MyServlet() {
        // TODO Auto-generated constructor stub
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		 response.setContentType("text/html;charset=utf-8");  
		 System.out.println("123");
	        String username = request.getParameter("username");  
	  
	        System.out.println(username);  
	  
	        JSONObject json = new JSONObject();  
	        JSONArray array = new JSONArray();  
	        JSONObject member = null;  
	        //for (int i = 0; i < 5; i++)  
	        //{  
	            member = new JSONObject();  
	            member.put("name", "xiaohua");  
	            member.put("age", 15);  
	            array.add(member);  
	        //}  
	  
	        json.put("mydata", array);  
	        PrintWriter pw = response.getWriter();  
	        pw.print(json.toString());  
	        pw.close();  
	    }  
	}

servlet也写好了，现在就来看下运行效果图