1. 回顾

1. servlet的生命周期:
2. filter: 过滤放行和拦截一些资源。比如:黑白名单,登录校验，编码设置等。
（1）创建一个类并实现Filter接口以及重写接口的抽象方法
（2）在web.xml文件中注册filter过滤器以及请求路径与filter的映射关系。

2. ajax异步请求

回顾:

上面的请求都是服务响应的结果为网页或者路径。而今天讲解的ajax则不是这样的，ajax只响应数据。

2.1 什么是ajax

例如: 百度搜索框—-使用了ajax.

当在百度搜索框触发键盘弹起事件时，会向服务器发送请求，服务器响应数据给事件。这里并没有响应整个页面给客户端。这就使用了ajax异步【局部】刷新

总结:（1） ajax一定是通过事件触发的。借助js。

（2）ajax服务器响应的不在是网页，而是数据。

2.2 简单使用ajax —-jquery

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chmhttps://jquery.cuishifeng.cn jquery (v3.6.0) – jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | Boot cdn – Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/jquery/借助: jquery

(1) 在网页中引入jquery库

<!–引入jquery库–>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

注意: <script>必须使用双标签

(2)使用jquery–ajax

$.get(url,[data],[callback],[type])

ajax的语法:—get提交方式。 [] 表示可有可无。

//get post

jQuery.get(url, [data], [callback], [type])
jQuery.post(url, [data], [callback], [type])
get|post:表示提交方式.
url: 服务器路径
data: 向服务器发送请求时携带的参数。
callback: 回调函数，当服务器响应结果时，会调用的函数。
type: 指定服务器响应的数据类型。

例子:

<%@ page import="java.util.Date" %><%-- Created by IntelliJ IDEA. User: ykq Date: 2022/5/20 Time: 14:40 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <!--引入jquery库--> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> </head> <body> <%--作用:让你看看浏览器有没有刷新页面--%> <%=new Date()%><br> <input type="button" onclick="ajax01()" value="点击"/> </body> <script> function ajax01(){ //ajaxServlet01表示服务器路径 {name:ykq,age:18}请求的参数 function(result){回调函数 result服务响应的数据} $.get("ajaxServlet01",{"name":"ykq","age":18},function(result){ alert(result); //弹出服务器响应的结果 }); } </script> </html>

servlet:

package com.aaa.servlet; 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; @WebServlet(name = "AjaxServlet",urlPatterns = "/ajaxServlet01") public class AjaxServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //接受请求参数 String name = req.getParameter("name"); String age = req.getParameter("age"); System.out.println("name===="+name); System.out.println("age===="+age); //响应客户端数据。 PrintWriter out = resp.getWriter();//获取out对象。 out.print("hello ajax");//()中的内容就是响应给客户端的内容。 //关闭输出对象 out.flush(); out.close(); } }

例子:注册功能:

zc.jsp:

<%-- Created by IntelliJ IDEA. User: wzh Date: 2022/5/20 Time: 15:20 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <!--引入jquery库--> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> </head> <body> <form action="/zcServlet" method="post"> 账号:<input type="text" name="username"/><br> 密码:<input type="text" name="password"/><br> 手机号:<input type="text" id="phone" name="phone" onblur="ckPhone()"/><span id="phoneMsg"></span><br> <input type="submit" value="注册"/> </form> <script> /*get和post get地址栏可以看到提交的数据 post地址栏看不到提交的数据 ajax的提交方式和表单没有关系。 * */ function ckPhone(){ var phone=$("#phone").val(); //id选择器: 通过id查询到dom元素 val():获取输入框输入的值 //ajax也是与服务器交互的一种方式。服务器那段不在跳转页面 而是响应数据。 $.post("CheckPhoneServlet",{"phone":phone},function(result){ //ajax会根据服务器响应的结果 做一些业务操作。 $("#phoneMsg").html(result); }); } </script> </body> </html>

CheckPhoneServlet:

package com.aaa.servlet; 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; @WebServlet(name = "CheckPhoneServlet",urlPatterns = "/CheckPhoneServlet") public class CheckPhoneServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); //接受手机号 String phone = req.getParameter("phone"); PrintWriter out = resp.getWriter(); //查询数据库是否存在该手机号. if("15700085997".equals(phone)){ out.print("<font color='red'>改手机号已经被注册</font>"); }else{ out.print("<font color='green'>该手机号可以使用</font>"); } out.flush(); out.close(); } }

2.3 服务响应的数据类型

(1)文本类型—-它是默认的。

(2)json对象类型—>重要.—一定是最多的。

(3)xml类型—–>一般不要，人工智能。微信小程序。

<people>
<name>张三</name>
<age>19</age>
</people>
这就是xml文件。

2.3.1 什么是json

JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON
是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
[
{
"name":"XXX",
"age":18,
"address":"香港"
},
{
"name":"XXX",
"age":18,
"address":"香港"
},
]

规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4）并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null

只要给我json数据，我就可以从json数据中获取到我想要的任何属性值。

json格式的语法:

json对象: {名称:值,名称:值…..}
json集合: [{名称:值,名称:值},{名称:值,名称:值},{名称:值,名称:值}]
值: string, number, object, array, true, false, null

3.服务器如何返回json数据

html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> </head> <body> <input type="button" id="btn" value="点击"/> </body> <script> $("#btn").click(function () { //为btn按钮绑定点击事件 $.post("json02",function(result){//通过ajax向服务端发送请求 //var parse = JSON.parse(result);//手动把服务器传递的json字符串转为json对象。 alert(result); // alert(result.name);//不能 因为result还是一个文本类型 只是他符合json格式。 },"json"); //json:告诉浏览器-把服务端返回的json格式字符串转换json对象。 默认为html文本类型。 }); </script> </html>

servlet:

package com.aaa.servlet; import com.aaa.entity.User; 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; @WebServlet(name = "AjaxServlet02",urlPatterns = "/json02") public class AjaxServlet02 extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); //业务处理得到一个用户对象---从数据库中查询的数据. User user = new User(1,"张三",18);//响应给客户端 PrintWriter writer = resp.getWriter(); //把java对象转换json格式的对象。如何转换：第一种手动转。 第二种借助第三方的工具来转。 String json="{"; json+=""id""+":"+"""+user.getId()+"","; json+=""name""+":"+"""+user.getName()+"","; json+=""age""+":"+"""+user.getAge()+"""; json+="}"; System.out.println(json); writer.print(json); //前端需要服务端传递一个json或者文档.{"name":"张三","age":15}; writer.flush(); writer.close(); } }

上面自己把java对象转换json格式的字符串，这种方式非常麻烦。我们可以使用第三方工具来完成。

比如阿里云fastJson, hutool工具，spring框架自动等等。

我们阿里fastjson. 引入fastjson的jar文件。

 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); PrintWriter writer = resp.getWriter(); List<User> list=new ArrayList<>(); list.add(new User(2,"晓东",18)); list.add(new User(3,"栗毅",17)); list.add(new User(4,"陈俊艺",18)); //[{"age":18,"id":2,"name":"晓东"},{"age":17,"id":3,"name":"栗毅"},{"age":18,"id":4,"name":"陈俊艺"}] String listjson = JSON.toJSONString(list); writer.print(listjson); //前端需要服务端传递一个json或者文档.{"name":"张三","age":15}; writer.flush(); writer.close(); }

点击某个按钮通过ajax向后台发送请求，后台返回一个json字符串[ 借助fastjson]。

4. 使用ajax完成一个案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陆页面</title> <!-- 引入jq--> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> </head> <body> <div style="border:1px solid black;text-align: center;margin:0px auto"> <form method="post"> 账号:<input type="text" name="username" id="username"/><br> 密码:<input type="password" name="password" id="password"/><br> <input type="button" value="登录" id="login"> <input type="button" value="注册" id="register"> <p id="errorMsg"></p> </form> </div> <script> //为登录按钮绑定单击事件 $("#login").click(function(){ //获取账号密码输入框的值 var username = $("#username").val(); var password = $("#password").val(); //alert(username); //通过ajax发送请求 $.post("UserServlet?method=login",{"username":username,"password":password},function(result){ if(result.code==2000){ //alert(result.code); location.href="main.html"; }else{ $("#errorMsg").html("<font color='red'>账号或密码错误</font> "); } },"json"); }); $("#register").click(function (){ location.href="register.html"; }); </script> </body> </html>

UserServlet:

package com.wzh.servlet; /** * @author : wzh * @date 2022/5/22 14:14:29 */ import com.alibaba.fastjson.JSON; import com.wzh.dao.UserDao; import com.wzh.entity.User; import com.wzh.util.CommonResult; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; import java.io.PrintWriter; @WebServlet(name = "UserServlet", urlPatterns = "/UserServlet") public class UserServlet extends HttpServlet { UserDao userDao = new UserDao(); @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //接收请求传递的method String method = req.getParameter("method"); System.out.println(method); if("login".equals(method)){ login(req,resp); }else if("register".equals(method)){ register(req,resp); }else if("username".equals(method)){ username(req,resp); } } //封装一个登陆方法 private void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取ajax传递的账号密码 String username = req.getParameter("username"); String password = req.getParameter("password"); System.out.println(username+" "+password); //调用dao方法判断账号密码是否正确 User user = userDao.findByUsernameAndPassword(username, password); System.out.println(user); //获取输出对象 PrintWriter writer = resp.getWriter(); if(user!=null){ HttpSession session = req.getSession(); session.setAttribute("user",user); //返回json数据以后它的结构都是统一的 //前端人员不好判断 CommonResult commonResult = new CommonResult(2000,"登录成功",null); writer.print(JSON.toJSONString(commonResult)); }else{ CommonResult commonResult = new CommonResult(5000,"登录失败",null); writer.print(JSON.toJSONString(commonResult)); } //关闭资源 writer.flush(); writer.close(); } private void register(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取传递的值 String username = req.getParameter("username"); String password = req.getParameter("password"); String relname = req.getParameter("relname"); //调用dao方法 添加到数据库 User user = new User(username,password,relname); userDao.insert(user); //获取输出对象 PrintWriter writer = resp.getWriter(); CommonResult commonResult = new CommonResult(2000,"注册成功",null); writer.print(JSON.toJSONString(commonResult)); writer.flush(); writer.close(); } //封装一个验证账号是否存在 private void username(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String username = req.getParameter("username"); //获取输出对象 PrintWriter writer = resp.getWriter(); //调用dao方法判断账号是否存在 User user = userDao.findByUsername(username); if(user!=null){ CommonResult commonResult = new CommonResult(2000,"账号不可用",null); writer.print(JSON.toJSONString(commonResult)); }else{ CommonResult commonResult = new CommonResult(5000,"账号可用",null); writer.print(JSON.toJSONString(commonResult)); } } }

main.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> </head> <body> <div> <table border="1" width="500"> <caption>学生表</caption> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> </thead> <tbody class="studentBody"></tbody> </table> </div> <script> //页面加载完毕后执行的方法 $(function(){ initStudent(); }); //发送ajax事件 function initStudent(){ $.post("StudentServlet?method=findAll",function(result){ var list = result.data; if(result.code==2000){ $.each(list,function(k,v){ //alert(v.id); $(".studentBody").append( $("<tr></tr>").append( $("<td></td>").html(v.id), $("<td></td>").html(v.name), $("<td></td>").html(v.age), $("<td></td>").html(v.address), $("<td></td>").html( "<button type='button' id=delete onclick='deleteid(v.id)'>删除</button>"+ "<button type='button' id=update>修改</button>" ) ) ); }); } },"json"); } </script> </body> </html>

StudentServlet:

package com.wzh.servlet; import com.alibaba.fastjson.JSON; import com.wzh.dao.StudentDao; import com.wzh.entity.Student; import com.wzh.util.CommonResult; 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; import java.util.List; /** * @author : wzh * @date 2022/5/22 15:54:48 */ @WebServlet(name="StudentServlet",urlPatterns = "/StudentServlet") public class StudentServlet extends HttpServlet { StudentDao studentDao = new StudentDao(); @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); String method = req.getParameter("method"); if("findAll".equals(method)){ findAll(req,resp); } } private void findAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //调用dao方法查询所有记录 List<Student> list = studentDao.findAll(); //获取输出对象 PrintWriter writer = resp.getWriter(); CommonResult commonResult = new CommonResult(2000,"查询学生信息成功",list); writer.print(JSON.toJSONString(commonResult)); writer.flush(); writer.close(); } }

原文链接：https://blog.csdn.net/weixin_68509156/article/details/124889604?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918469516781683976240%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918469516781683976240&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-124889604-null-null.nonecase&utm_term=%E9%A6%99%E6%B8%AFcdn

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5147