JQUERY AJAX定时操作服务器数据

最新推荐文章于 2021-08-26 11:43:11 发布

iteye_19207

最新推荐文章于 2021-08-26 11:43:11 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： Ajax jQuery Java json Servlet ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_19207/article/details/82044040

Jquery 专栏收录该内容

3 篇文章

订阅专栏

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)[i].sex + '</td>' + '<td>' + eval(data)[i].name + '</td></tr>');

			});

	});
}
</script>
	</head>

	<body>
		<table>
			<tr>
				<td>
				用户性别
				</td>
				<td>
				用户名
				</td>
			</tr>
		</table>
	</body>
</html>