jquery动态从后台取数据并显示在前台页面

最新推荐文章于 2024-11-27 21:27:52 发布

原创最新推荐文章于 2024-11-27 21:27:52 发布 · 6.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #null #function #exception #string #webapp

jquery 专栏收录该内容

3 篇文章

订阅专栏

该博客展示了如何使用jQuery的$.get方法每两秒动态从Servlet获取数据，并将结果显示在页面的<div id='resultMess'></div>中。JqServlet.java处理HTTP请求，根据QueueCountStore类中的静态变量更新queueCount1和queueCount2的值，然后返回给前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.timers-1.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).everyTime(2000,function(num){
$.get("/TestJq/image.do",function(data){
$("#resultMess").html(data);
});
});
});
</script>
</head>
<body>
<div id="resultMess"></div>
</body>
</html>

JqServlet.java:

public class JqServlet extends HttpServlet {

/*
* doGet method
*/
public void doGet(HttpServletRequest request, HttpServletResponse response) {
doPost(request, response);
}

/*
* doPost method
*/
public void doPost(HttpServletRequest request, HttpServletResponse response) {
PrintWriter out = null;
response.setContentType("text/html;charset=UTF-8");
try {
out = response.getWriter();
if ((QueueCountStore.queueCount1 != null) && (QueueCountStore.queueCount2 != null)) {
out.println("queueCount1" + "=" + QueueCountStore.queueCount1 + ";" + "queueCount2" + "=" + QueueCountStore.queueCount2);
}
if ((QueueCountStore.queueCount1 != null) && (QueueCountStore.queueCount2 == null)) {
out.println("queueCount1" + "=" + QueueCountStore.queueCount1 + ";" + "queueCount2" + "=" + "0");
}

if ((QueueCountStore.queueCount1 == null) && (QueueCountStore.queueCount2 != null)) {
out.println("queueCount1" + "=" + "0" + ";" + "queueCount2" + "=" + QueueCountStore.queueCount2);
}

if ((QueueCountStore.queueCount1 == null) && (QueueCountStore.queueCount2 == null)) {
out.println("queueCount1" + "=" + "0" + ";" + "queueCount2" + "=" + "0");
}
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out != null) {
out.close();
}
}
}
}

QueueCountStore.java(这个类只是用来临时存储数据)

public class QueueCountStore {
public static String queueCount1 = "2";
public static String queueCount2 = "6";
}

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<servlet>
<servlet-name>Image</servlet-name>
<servlet-class>com.test.JqServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Image</servlet-name>
<url-pattern>/image.do</url-pattern>
</servlet-mapping>
</web-app>