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也写好了,现在就来看下运行效果图