系列文章:
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="
,这个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:(用户一直看到的页面)
需要注意的是,还需要在该主jsp文件的body后面加上onload:
...
...
...
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("");
out.println(""+"车内温度:"+(String)request.getSession().getAttribute("temperature")+"°C"+" "); //这句话至关重要,他就决定着刷新之后显示的内容
out.println(" ");
//out.close();
%>
核心代码就是以上几个文件中的了,抓住这个逻辑,其余的额外功能再进行进一步完善即可。
至此就完成了客户端向服务器发送数据并实时显示在JSP页面上。
服务器向客户端传递数据请看:
JSP向Servlet传递数据以及与STM32、ESP8266通信过程