Servlet是java基础API,用于处理由前台发送回来的request请求和发送response响应至前台
开发工具及开发环境:
- Idea
- JDK1.8
- apache-maven-3.5.3
- apache-tomcat-8.5.31
流程
1.新建一个maven项目:
2.设置maven项目Facets:
3.设置maven项目Artifacts:
4.添加tomcat:
5.引入pom依赖
<dependencies>
<!--Servlet基础jar包-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.2</version>
<scope>provided</scope>
</dependency>
6.在web.xml中配置请求关系
<!--访问主页-->
<servlet>
<servlet-name>toIndex</servlet-name>
<servlet-class>com.dj.indexServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>toIndex</servlet-name>
<url-pattern>/index</url-pattern>
</servlet-mapping>
<!--ajax向后台提交数据接收后台数据,登陆验证Demo-->
<servlet>
<servlet-name>getMessage</servlet-name>
<servlet-class>com.dj.getMessageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getMessage</servlet-name>
<url-pattern>/getMessage</url-pattern>
</servlet-mapping>
<!--实现页面带数据的页面跳转-->
<servlet>
<servlet-name>pageWithData</servlet-name>
<servlet-class>com.dj.pageWithDataServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>pageWithData</servlet-name>
<url-pattern>/pageWithData</url-pattern>
</servlet-mapping>
7.新建indexServlet类,用于返回展示页面,因为此处只是做一个简单的Demo,所以我就使用doGet方法向前台返回一个页面
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by dj on 2018/7/27.
*/
@WebServlet(name = "indexServlet")
public class indexServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/**
* 方法1:使用页面跳转的方式,更改页面的url
*/
response.sendRedirect("index.jsp");
/**
* 方法2:使用页面返回的方式,加载web文件夹中的.jsp文件中的内容,将内容返回出去,url不变(推荐方法)
*/
request.getRequestDispatcher("/index.jsp").forward(request,response);
/**
* 方法3:通过调用IO流的方式,将网页信息写出去
*/
response.setContentType("text/html");
PrintWriter pw = response.getWriter();
pw.write("<!DOCTYPEhtml>");
pw.write("<html>");
pw.write("<head>");
pw.write("<title>");
pw.write("index");
pw.write("</title>");
pw.write("</head>");
pw.write("<body>");
pw.write("index");
pw.write("</body>");
pw.write("</html>");
}
}
8.建立一个getMessageServlet用于接收处理前台以ajax方式输入的数据,并且返回数据至前台
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter pw = response.getWriter();
if(username.equals("user") && password.equals("word")){
pw.write("登陆成功");
}else{
pw.write("登陆失败");
}
pw.close();
}
9.前台页面,通过ajax方式向后台发送数据,同时接收后台传递过来的数据改变页面
<li>ajax提交数据接收返回值</li><br/><br/>
<input type="text" id="username" name="username" placeholder="请输入用户名"><br/><br/>
<input type="password" id="password" name="password" placeholder="请输入密码"><br/><br/>
<input type="submit" onclick="ajaxFun()" value="点击提交">
<div>
<li id="getM" ></li>
</div>
</body>
</html>
<script type="text/javascript">
function ajaxFun(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(username+" "+password);
$.ajax({
type:"post",
url:"/getMessage",
data:"username="+username+"&password="+password,
success:function(message){
document.getElementById("getM").innerHTML=message;
}
});
}
</script>
10.实现一个带参的页面跳转,新建一个Servlet用于接收前台发送的数据,使用request.setAttribute的方式将数据存储至页面参数中,使用页面发送的方式将页面返回至前台
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter pw = response.getWriter();
request.setAttribute("username",username);
request.setAttribute("password",password);
request.getRequestDispatcher("pageWithData.jsp").forward(request,response);
pw.close();
}
11.前台页面使用中使用jsp的EL表达式的方式将后台request中Attribute的参数显示出来,在此过程中博主遇到一个问题,就是页面中的中文字符集一直处于乱码状态,在找了很多地方后找到错误,我在设置response的字符集的时候把respon.setContentType(“text/html;charset=utf-8”)错写成respon.setContentType(“text/html;charset:utf-8”)
<head>
<title>欢迎页面</title>
</head>
<body>
<tr><%= request.getAttribute("username").toString() %>欢迎登陆!!!!<br/><br/>
您的密码是<%= request.getAttribute("password").toString() %><br/><br/></tr>
</body>
</html>