Servlet向JSP传递数据以及JSP页面DIV定时局部刷新

系列文章:
ESP8266的AP模式与STA模式简单测试
简单的Java服务器和客户端的通信
STM32 ESP8266和Java服务器透传模式下的双向通信
jsp向servlet传输数据
Servlet向JSP传递数据以及JSP页面DIV定时局部刷新
JSP向Servlet传递数据以及与STM32、ESP8266通信过程

客户端为连接在STM32上的ESP8266,服务器就是用Java创建的

//以下为接收客户端发来的数据,注意必须使用数组进行接收,不能使用readUTF来接收
byte[] msg = new byte[6];//声明一个数组用于接收客户端8266发来的数据
input.read(msg);//注意8266发给服务器的数据在这里一定要使用read函数来接收,并且把接收到的数据存储到一个数组里面,不能再使用readUTF函数来读取了,可能单片机通过串口发送的数据不是UTF格式
System.out.println("客户端发过来的数据:" + new String(msg)+ "\n");

String ReceiveClientData = new String(msg);
request.getSession().setAttribute( "temperature",ReceiveClientData);//注意一定要加getSession
request.getRequestDispatcher( "/ControlSystem.jsp").forward(request,response);
System.out.println("向JSP发送的数据:" + ReceiveClientData+ "\n");

注意servlet向JSP传递数据,一定要使用Session会话,即

request.getSession().setAttribute( "temperature",ReceiveClientData);//注意一定要加getSession
request.getRequestDispatcher( "/ControlSystem.jsp").forward(request,response);

其中参数/ControlSystem.jsp就是 要把数据传输到的那个JSP页面的名字

好像是servlet和JSP的request不是同一个request,这又涉及到了作用域的问题,详情请点击
在JSP中,对数据进行接收可以采用下面这种方法:

上面是head
<%
	String str=(String)request.getSession().getAttribute("temperature");//Servlet传过来的数据
	System.out.println("JSP收到的数据:" + str+ "\n");
%>
下面是body

但是经过试验才发现,这样虽然在这里获得了由servlet传过来的数据,但是由于<% %>里面的变量都只是局部变量,他不能作用于后面的刷新函数,即如果你在后面的javascript中的刷新函数里面进行局部刷新的时候document.getElementById('mydiv').innerHTML="<div>车内温度:<%= str%>°C</div>";,这个str在这里刷新完之后就会是一个null,即尽管你在jsp页面上面的
< %String str=(String)request.getSession().getAttribute("temperature");//Servlet传过来的数据 System.out.println("JSP收到的数据:" + str+ "\n"); %>中获得了str的值,但是这个值在javascript中是调用不过来的,因为它只是一个局部变量而已,所以这种方法不行。
经过多方查找,终于找到了一个可以用的,下面请看:
同样又是用到了异步加载技术Ajax,ajax的作用就是可以实现JavaScript 可在不重载页面的情况下与 Web 服务器交换数据,即在不需要整体刷新页面的情况下,就可以产生局部刷新的效果。使用这种方法就是得需要再单独创建一个jsp页面,这个页面中放的内容就是你想要的刷新之后显示的内容。
这种方法的流程就是:首先要由主JSP页面发出ajax请求,然后指定一个servlet文件(后缀名为.java)去接收并处理这个请求,处理这个请求的过程就是接受客户端发来的数据并把数据传递给你另外新建的一个用于刷新的jsp页面,然后在这个新建的jsp页面中进行局部刷新工作,然后再把刷新之后的整体数据和样式(也就是刷新之后页面要的显示的所有内容)发送给你的主jsp中去接收并显示出来。为了实现定时局部刷新的效果,那么就是在主jsp页面中定时发送ajax请求即可。

我们一步步来看:
首先来看一下主jsp页面的核心代码(包括定时发送ajax请求和接收最后返回来的刷新结果并显示):
主jsp:(用户一直看到的页面)

<script type="text/javascript">
 	    var XMLHttpReq;  
 	        //创建XMLHttpRequest对象         
 	        function createXMLHttpRequest() {  
 	            if(window.XMLHttpRequest) { //Mozilla 浏览器  
 	                XMLHttpReq = new XMLHttpRequest();  
 	            }  
 	            else if (window.ActiveXObject) { // IE浏览器  
 	                try {  
 	                    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");  
 	                } catch (e) {  
 	                    try {  
 	                        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");  
 	                    } catch (e) {}  
 	                }  
 	            }  
 	        }  
 	        //发送请求函数  
 	        function sendRequest() {  
 	            createXMLHttpRequest();  
 	           $.ajax({  
					type:"post",  
		            url:"RefreshTest",  //指定你要把这个请求传递到哪一个文件中去响应,这里我是传给了RefreshTest.java文件
		            data:{
		               'refresh':"1",//这个传递的数据其实我后面并没有用到,我只是随便传了一个数据而已,最主要的是要定时发送这个请求
		            },
		       	    dataType:"json"    //数据类型为json格式
		       });
 	            
 	            var url = "Refresh.jsp";  
 	            XMLHttpReq.open("Post", url, true);  
 	            XMLHttpReq.onreadystatechange = processResponse;//指定响应函数  
 	            XMLHttpReq.send(null);  // 发送请求  
 	        }  
 	        // 处理返回信息函数  
 	        function processResponse() {  
 	            if (XMLHttpReq.readyState == 4) { // 判断对象状态  
 	                if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息  
 	                    DisplayHot();  
 	                    setTimeout("sendRequest()", 1000); //定时1000ms循环执行sendRequest()函数,也就是我们的JSP页面是1s局部刷新一次,这个时间根据具体需要进行更改
 	                } else { //页面不正常  
 	                    window.alert("您所请求的页面有异常。");  
 	                }  
 	            }  
 	        }  
 	        function DisplayHot() {  
 	        	var temperature = XMLHttpReq.responseXML.getElementsByTagName("temperature")[0].firstChild.nodeValue;
 	            document.getElementById("temperature").innerHTML = temperature;/*  这句话的意思就是对你的主jsp文件中body内的id属性为temperature的这个元素进行更新为等号后面的变量的内容,而等号后面的内容就是ajax请求得到服务器响应之后返回来的实时数据,这条语句就是实现局部刷新的最后一步*/
 	        }  
...
...
...
</script>

需要注意的是,还需要在该主jsp文件的body后面加上onload:

<body onload =sendRequest()>
...
...
...
</body>

RefreshTest.java(用于接收主jsp发来的ajax请求并做相应处理的servlet文件)

package servlet;

import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.IOException;
import java.net.Socket;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * Servlet implementation class LoginServlet
 */
//@WebServlet是采用注入的方式表示这是一个Servlet类,采用此方法比较方便,因为此方法不用再去配置web.xml文件
@WebServlet("/RefreshTest")
public class RefreshTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
	private Socket socket;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public RefreshTest() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
    //doGet响应get请求,doPost响应post请求,为了保证不管在login.jsp中选择post方法还是get方法,在这里都能有所回应,所以
    //这里只在doPost中写相应的代码,而在doGet中直接调用doPost函数即可
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {	
		doPost(request, response);
//		response.getWriter().append(info);	
	}

	private void alert(String string) {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub

		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html");
		
		Socket client = SocketTest.getClient();
		
		DataInputStream input = new DataInputStream(client.getInputStream());//新建一个输入流,用来读取客户端发来的数据 
		
        
		byte[] msg = new byte[6];//声明一个数组用于接收客户端8266发来的数据
        input.read(msg);//注意8266发给服务器的数据在这里一定要使用read函数来接收,并且把接收到的数据存储到一个数组里面,不能再使用readUTF函数来读取了,可能单片机通过串口发送的数据不是UTF格式
        String ReceiveClientData = new String(msg);
        System.out.println("客户端发过来的数据:" + ReceiveClientData+ "\n");
        request.getSession().setAttribute( "temperature",ReceiveClientData);//把从客户端接收到的数据赋值给temperature,注意一定要加getSession
        request.getRequestDispatcher( "/Refresh.jsp").forward(request,response);//把请求再转发到`Refresh.jsp` 去执行
        
	}
}

Refresh.jsp(新建的用于局部刷新的jsp页面)

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%  
    //设置输出信息的格式及字符集  
    response.setContentType("text/xml; charset=UTF-8");  
    response.setHeader("Cache-Control","no-cache");  
    out.println("<response>");  
    
    out.println("<temperature>"+"车内温度:"+(String)request.getSession().getAttribute("temperature")+"°C"+"</temperature>");  //这句话至关重要,他就决定着刷新之后显示的内容
    
    out.println("</response>");  
    //out.close();  
    %>

核心代码就是以上几个文件中的了,抓住这个逻辑,其余的额外功能再进行进一步完善即可。
至此就完成了客户端向服务器发送数据并实时显示在JSP页面上。
服务器向客户端传递数据请看:
JSP向Servlet传递数据以及与STM32、ESP8266通信过程

发布了103 篇原创文章 · 获赞 319 · 访问量 36万+

猜你喜欢

转载自blog.csdn.net/qq_36554582/article/details/103914917