jsp向servlet传输数据

系列文章：
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 stubString 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"});}

jsp向servlet传输数据相关推荐

JSP向Servlet传递数据以及与STM32、ESP8266通信过程
系列文章: Servlet向JSP传递数据以及JSP页面DIV定时局部刷新 STM32 ESP8266和Java服务器透传模式下的双向通信 jsp向servlet传输数据 ESP8266的AP模式与S ...
JSP和Servlet互相传输数据的过程中产生的乱码问题及解决方案（没有使用AJAX的情况）...
一. 服务器端接收到浏览器端传送的数据出现乱码的问题!!!(Servlet端获取数据时出现乱码) 1. 为什么表单提交中文会出现乱码的问题?(非AJAX方式) 浏览器端:当表单提交时,浏览器会对中文参 ...
JSP和Servlet
1 三个Statment区别,用法 Statment,基本的:PreparedStatement是可编译的,提高效率,callablestatment,存储过程 2 Cookie 答:临时cookie ...
jsp与java的关系_jsp教程中:jsp与servlet的区别和关系
jsp教程上:我们一定学了servlet,也学习了jsp,那么jsp与servlet的区别是什么呢,jsp与servlet又有什么关系呢?下面我们先创建一个demo.jsp的页面,然后tomcat运行 ...
JSP和Servlet学习笔记1 - 访问配置
1. 访问 WebContent 目录下的 JSP 文件在 WebContent 目录下的文件可以直接在浏览器中访问.新建一个 test.jsp 文件 <%@ page language=&q ...
java与servlet JSP_java面试精品全集[jsp与servlet部分]
一.Jsp方面 1.forward 和redirect的区别答:forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本 ...
详谈jsp和servlet的区别
其实说白了JSP和SERVLET到底什么区别呢,JSP就象宾馆前台的服务员,要长的不错,让顾客一看就觉得比较舒服,他主要就是负责显示这个宾馆的形象的.而SERVLET就象部门经理,要处理各种各样的业务 ...
java servlet 获取路径问题_Java，JSP，Servlet获取当前工程路径（绝对路径）问题解析...
在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是webroot 在class文件中,根目录是webroot/web-inf/classes 当然你也可以用system.getpro ...
JSP和Servlet面试题精选
1,JSP的内置对象有哪些? 答:JSP共有9个内置对象分别是: request:用户端请求,此请求会包含来自GET/POST请求的参数 response:网页传回用户端的回应 pageContext ...

jsp向servlet传输数据

jsp向servlet传输数据相关推荐

最新文章

热门文章