JQUERY AJAX定时操作服务器数据
1.需要json-lib.jar支持。依赖包:commons-beanutils.jar
commons-collections.jar
commons-httpclient.jar
commons-lang.jar
commons-logging.jar
ezmorph.jar
morph.jar
2.servlet代码:
import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;public class TestAjax extends HttpServlet {private static final long serialVersionUID = 1L;static int i = 0;@SuppressWarnings("unchecked")public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {i++;response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();List list = new ArrayList();User u = new User();u.setName("偶尔" + i);u.setSex("女" + i);User u1 = new User();u1.setName("现在" + i);u1.setSex("男" + i);list.add(u);list.add(u1);JSONArray obj = JSONArray.fromObject(list);out.println(obj.toString());out.flush();out.close();}}
3.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>JQUERY AJAX定时操作服务器数据</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript"src="<%=basePath%>js/jquery-1.4.4.min.js"></script><script type="text/javascript">$(document).ready(function() {setInterval(getList, 1000);//每隔1秒调用一次getList()});function getList() {//发送post请求$.post("TestAjax", function(data) {$("table").empty();$("table").append("<tr><td style='color:red'>用户性别</td><td>用户名</td></tr>"); //循环输出json数组$.each(eval(data), function(i){$("table").append('<tr><td>' + eval(data).sex + '</td>' + '<td>' + eval(data).name + '</td></tr>');});});}</script></head><body><table><tr><td>用户性别</td><td>用户名</td></tr></table></body></html>
说明:post提交方式没有问题啦
页:
[1]