系列文章：
ESP8266的AP模式与STA模式简单测试
简单的Java服务器和客户端的通信
STM32 ESP8266和Java服务器透传模式下的双向通信
jsp向servlet传输数据
Servlet向JSP传递数据以及JSP页面DIV定时局部刷新
JSP向Servlet传递数据以及与STM32、ESP8266通信过程
一、类似于登录页面的，即需要跳转到其他页面的
这种情况一般使用：<form action="将要跳转到的目标页面的名字(不用输入后缀名.jsp)" method="post">
举例：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
body{margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url(img/login_background.png);
background-size: cover;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding: 40px;
background: rgba(0,0,0,.8);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.5);
border-radius: 10px;
}
.box h2{
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.box .inputBox{
position: relative;
}
.box .inputBox input{
width: 100%;
padding: 10px,0;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
}
.box .inputBox label{
position: absolute;
top: 0;
left: 0;
padding: 10px,0;
font-size: 16px;
color: #fff;
letter-spacing: 1px;
pointer-events: none;
transition: .5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label
{
top: -18px;
left: 0;
color: #03a9f4;
font-size: 12px;
}
.box input[type="submit"]{
background: transparent;
border: none;
outline: none;
color: #fff;
background: #03a9f4;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-left: 120px;
}
</style>
</head>
<body>
<div class="box">
<h2>Login</h2>
<!-- 下面这句话很重要，由它决定跳转到哪个文件执行，并且说明了使用post方法，
所以不能只用点击事件来触发，点击事件没有说明使用的是post方法 ，
另外注意当使用get方法时，账号密码会暴露在地址栏中 -->
<form action="TestServlet" method="post">
<div class="inputBox">
<input type="text" name="Username" required="" />
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="password" required="" />
<label>password</label>
</div>
<!-- 注意提交按钮不用设置成点击事件，直接使用form的action属性即可设置跳转到哪个页面 -->
<input type="submit" name="" value="submit" />
</form>
</div>
</body>
<!-- <script>
function login(){
location.replace("LoginServlet");
}
</script> -->
</html>
使用这种方法需要注意的是，提交按钮的类型一定要是"submit"。注意不需要再把提交按钮添加一个点击事件了，因为使用这种方法本身就带有自动跳转的功能，控制跳转的目的地是由action来控制的。
servlet端的代码：
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
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("/validate")
public class validate extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public validate() {
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
//从login页面中获取用户名和密码
String name = request.getParameter("Username");
String password = request.getParameter("password");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
if(name == null || password == null || name.equals("") || password.equals("")) {
response.getWriter().append("账号/密码不能为空");
return;
}else {
if(name.equals("sdsfddfd") && password.equals("dfsdgfg")) {
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/ControlSystem.jsp");//如果登陆成功，则跳转到指定的页面
dispatcher.forward(request, response);
}else {
//response.sendRedirect("login.jsp");//直接重定向到登录页面，无任何提示信息
//有登录失败的提示信息，但是跳到了一个新页面，点击确定之后重新回到登录页面回到指定页面
PrintWriter out = response.getWriter();
out.print("<script>alert('账号/密码错误，请重新登录!');window.location.href='login.jsp'</script>");
}
}
}
}
二、不跳转页面，只是点击按钮，然后jsp向servlet传输数据
这种情况就需要使用ajax技术，注意ajax()方法是jquery中的，而不是javascript中的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<!-- <script type="application/javascript"></script> -->
<script type="text/javascript"></script>//这条语句也可以不写
<title>JSP Page</title>
</head>
<body>
<input type="button" value="ahead" onclick="ahead()"/>/注意使用ajax时候必须使用"button"类型
<input type="button" value="back" onclick="back()"/>
</body>
<script type="text/javascript">
function ahead(){
$.ajax({
type: "post",
url:"TestServlet",
data:{
'ahead_flag':"1",//此处的“1”加不加双引号都可以，反正到了后台都是强制为字符串来处理
'back_flag':"0"
} ,
dataType: "json"
});
}
function back(){
$.ajax({
type: "post",
url:"TestServlet",
data:{
'ahead_flag':"0",//此处的“1”加不加双引号都可以，反正到了后台都是强制为字符串来处理
'back_flag':"1"
} ,
dataType: "json"
});
}
</script>
</html>
servlet端的代码：
package servlet;
import java.io.IOException;
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("/TestServlet")
public class TestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet() {
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);
}
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
String ahead_flag = request.getParameter("ahead_flag");
String back_flag = request.getParameter("back_flag");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
System.out.println("收到ajax请求");
System.out.println(ahead_flag);
System.out.println(back_flag);
}
}
注意使用Ajax技术时的数据格式
$.ajax({
type: "post",
url:"TestServlet",
data:{
'ahead_flag':"0",//此处的“1”加不加双引号都可以，反正到了后台都是强制为字符串来处理
'back_flag':"1"
} ,
dataType: "json"//预期服务器返回来的数据格式，而不是此处将要发送的数据格式
});
type就是说明请求的方式是post还是get
url就是说目标页面，即你希望把数据传到的那个页面的名字，不用加后缀.java
data：就是数据，如果只有一个数据，那么可以写成：
$.ajax({
type: "post",
url:"TestServlet",
data:"ahead_flag=1",
dataType: "json"
});
dataType就是预期服务器将要返回来的数据类型，而不是此处将要发送的数据类型。
另外注意点击的按钮也可以以图片的形式展现：
<div class="switch"><img onclick="javascript:ahead();" class="switch" src="img/off.png"></div>
动作函数依然保持原样：
function ahead(){
$.ajax({
type: "post",
url:"TestServlet",
data:{
'ahead_flag':"1",//此处的“1”加不加双引号都可以，反正到了后台都是强制为字符串来处理
'back_flag':"0"
} ,
dataType: "json"
});
}
2135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
