JavaWeb----Ajax技术

小咪咪 2023-09-23 16:49 128阅读 0赞

**目录**

Ajax技术详解

Ajax简介

Ajax 的使用

Ajax 的运行原理

XMLHttpRequest 对象

Ajax 的使用步骤

Ajax请求

编辑

Get/Post请求

JSON详解

JSON简介

为什么要使用 JSON

JSON 格式的特征

JSON的语法规则

JOSN的数据类型

JACKSON 的使用

Jackson 简介

在项目中引入Jackson

Jquery 的 Ajax 使用

Ajax 实战

创建项目

添加依赖包

导入jquery包

创建实体类User

创建页面

创建UserServlet

查询用户列表

添加用户

servlet相关

更新用户

删除用户

# Ajax技术详解 #

## Ajax简介 ##

![ecf321fbb87f483a897b560659623c5d.png][]

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建 交互式、快速动态应用的网页开发技术，无需重新加载整个网页的 情况下，能够更新页面局 部数据的技术。通过在后台与服务器进行少量数据交换，Ajax 可以 使页面实现异步更新。这意味着可以在不重新加载整个页面的情况 下，对页面的某部分进行更新。

![ad01802c5d1a435999e77d0c29f0a1e0.png][]

## Ajax 的使用 ##

### Ajax 的运行原理 ###

![8fc345cdddae4bfd89613d956e9e40bd.png][]

### XMLHttpRequest 对象 ###

XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用， 通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数 据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个 页面刷新，因此成为 Ajax 编程的核心对象。

### Ajax 的使用步骤 ###

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://www.example.com");

发送请求

xhr.send()

获取服务器端给客户端的响应数据

xhr.onreadystatechange = function(){
        //0:请求未初始化
        //1:服务器连接已建立
        //2:请求已接收
        //3:请求处理中
        //4:请求已完成，且响应已就绪
        if(xhr.readyState == 4 && xhr.status == 200){
            document.getElementById("span").innerHTML=xhr.responseText;
            alert(xhr.responseText);
       }
    }

## Ajax请求 ##

![bea73edddb114f0ab019bbe8dce0e91f.png][]

请求的步骤： 正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用

> 1 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest对象。
> 
> 2 HTTP请求由XMLHttpRequest 对象发送到服务器。
> 
> 3 服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。
> 
> 4 检索数据。
> 
> 5 服务器将 XML 数据或 JSON数据发送到 XMLHttpRequest 回调函数。
> 
> 6 HTML和 CSS 数据显示在浏览器上。

### ![2f4a091db10f4cae8e38a212927ebe96.png][] ###

### Get/Post请求 ###

get 和 post请求是http协议中的两种请求方式。

> 1、get请求一般用来请求获取数据，post请求一般作为发送数据到后台，传递数据，创建数据；
> 
> 2、get请求也可以传参到后台，但是传递的参数则显示在地址栏，安全性低，且参数的长度也有限制 （2048字符），post请求则是将传递的参数放在request body中，不会在地址栏显示，安全性比 get请求高，参数没有长度限制；
> 
> 3、get请求刷新浏览器或者回退没有影响，post请求则会重新请求一遍；
> 
> 4、get请求可以被缓存，也会保留在浏览器的历史记录中，post请求不会被缓存，也不会保留在浏览 器的历史记录中；
> 
> 5、get请求通常是通过url地址请求，post常见的则是form表单请求

**Get请求示例**

xhr.open("GET", "http://localhost:8080/get.txt?t=" + Math.random(), true);
    xhr.open("GET", "http://localhost:8080/get.txt?fname=zhang&lname=san", true);

**Post请求示例**

xhr.open("POST","http://localhost:8080/post.txt", true);
    xhr.setRequestHeader("Contenttype","application/x-www-form-urlencoded");
    xhr.send("fname=zhang&lname=san");

**同步或异步**

**Async=true**

当使用 async=true时，请规定在响应处于onreadystatechange事 件中的就绪状态时执行的函数

xhr.onreadystatechange = function(){
    if (xhr.readyState === 4 && xhr.status === 200) {
          document.getElementById("view").innerHTML = xhr.responseText;
       }                
    }
    xmlhttp.open("GET","get.txt",true);
    xmlhttp.send();

**Async = false**

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以 的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁 忙或缓慢，应用程序会挂起或停止。

xmlhttp.open("GET","get.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax服务器响应

**状态行**

xhr.status状态码，如200，304，404等；

**响应主体**

xhr.responseText与xhr.responseXML都表示响应主体。 如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText或responseXML属性。

![0ec52f09643b4918a59a5594b4997bb3.png][]

## JSON详解 ##

![c41af980fc5b4b1faddd4a4680375532.png][]

### JSON简介 ###

JSON(JavaScript Object Notation) 是一种基于字符串的轻量级的数 据交换格式。易于阅 读和编写，同时也易于机器解析和生成。JSON 是 JavaScript 数据 类型的子集。

### 为什么要使用 JSON ###

在 JSON 未出现之前在 Ajax 中对于数据传递方式，会使用 XML 作 为主要数据格式来传输数据。直到 JSON 出现后逐渐放弃使用 XML 作为数据传输格式。JSON 比 XML 更小、更快、更易解析。

### JSON 格式的特征 ###

### JSON的语法规则 ###

JSON 是按照特定的语法规则所生成的字符串结构。

> 大括号表示 JSON 的字符串对象。\{ \}
> 
> 属性和值用冒号分割。\{"属性":"value"\}
> 
> 属性和属性之间用逗号分割。\{"属性":"value","属性":"value",...\} 中括号表示数组。\[\{"属性":"value"...\},\{"属性":"value"...\}\]

**JSON 字符串对象：**

![78c06fdfbccd4b3fba33a6cc925afd31.png][]

{"userid":1,"username":"admin","sex":"male"}

**数组：**

![21035d97efc24bebb39f378e805f0f87.png][]

[{"userid":1,"username":"admin"},
    {"userid":2,"username":"zhangsan"}]

### JOSN的数据类型 ###

> 1、string：字符串，必须要用双引号引起来。
> 
> 2、number：数值，与 JavaScript 的 number 一致。
> 
> 3、object：JavaScript 的对象形式，\{ key:value \}表示方式，可嵌套。
> 
> 4、array：数组，JavaScript 的 Array 表示方式\[ value \]，可嵌套。
> 
> 5、true/false：布尔类型，JavaScript 的 boolean 类型。
> 
> 6、null：空值，JavaScript 的 null。

## JACKSON 的使用 ##

![e7a70c8f1ae446908d186f271bf28868.png][]

在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处理 JSON 格式的数据需要借 助第三方类库。几个常用的 JSON 解析类库： Gson: 谷歌开发的 JSON 库，功能十分全面。 FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。 Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析 器”

### Jackson 简介 ###

Jackson 是一种解析 JSON 格式数据的 API，也是最流行，速度 最快的 JSON API，最新版本是2.13.3，有3个jar包需要下载： jackson-core-2.13.3.jar（核心jar包） jackson-annotations-2.13.3.jar（提供Json注解支持） jackson-databind-2.13.3.jar（数据绑定，依赖于前两个包）

### 在项目中引入Jackson ###

![ef76f5e7fd464498a097f024598d9db7.png][]

**序列化**

使用Jackson把java对象转换成Json数据。首先，创建 TestBean.java

public class TestBean {
        //id
        private String id;
       //姓名
        private String name;
        //嵌套对象
        private List<Element> elements;
        public String getId() {
            return id;
       }
        public void setId(String id) {
            this.id = id;
       }
        public String getName() {
            return name;
       }
        public void setName(String name) {
            this.name = name;
       }
        public Elements getElements() {
            return elements;
       }
        public void setElements(Elements elements) {
            this.elements = elements;
       }
    }

再创建Element.java

public class Element {
       //年龄
        private Integer age;
       //呢称
        private String ename;
        public Integer getAge() {
            return age;
       }
        public void setAge(Integer age) {
            this.age = age;
       }
        public String getEname() {
            return ename;
       }
        public void setEname(String ename) {
            this.ename = ename;
       }
    }

把Java对象转成Json

Element element = new Element();
    element.setAge(23);
    element.setEName("itbaizhan");
    ObjectMapper objectMapper = new ObjectMapper();
    String elementStr = objectMapper.writeValueAsString(element);
    System.out.println(elementStr);

输出结果如下

{"age":23,"elName":"itbaizhan"}

**反序列化**

String str = "{\"id\":1,\"name\":\"zhangsan\",\"elements
    \":[{\"age\":22,\"elName\":\"xiaozhang\"},
    {\"age\":26,\"elName\":\"xiaosan\"}]}";
    ObjectMapper objectMapper = new ObjectMapper();
    TestBean testBean = objectMapper.readValue(str,TestBean.class);
    System.out.println(testBean.toString());

输出结果如下：

TestBean(id=1, name=haha, elements=
    [Element(age=22, elName=xiaozhang),
    Element(age=26, elName=xiaosan)])

**常用注解**

将这个注解加载类上，不存在的字段将被忽略。

@JsonIgnoreProperties(ignoreUnknown = true)

指定忽略字段

@JsonIgnoreProperties({ “password”, “secretKey” })

标在注解上，将忽略此字段

@JsonIgnore

标在时间字段上使用指定规则格式化（默认转化成时间戳）

@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")

是否参与序列化

@JsonInclude(参数)

> JsonInclude.Include.NON\_EMPTY：属性为空或者null都不参与 序列化 JsonInclude.Include.NON\_NULL：属性为null不参与序 列化

标在字段上，指定序列化后的字段名

@JsonProperty("firstName")

自定义某些类型字段的序列化与反序列化规则

@JsonDeserialize(using= T extends
    JsonDeserializer.class)
    @JsonSerialize(using= T extends
    JsonSerializer.class)

## Jquery 的 Ajax 使用 ##

> 在 JQuery 中提供了对 Ajax 的封装，让我们在使用 Ajax 技术时变得 更加容易。在 JQuery 中提供了很多的基于 Ajax 发送异步请求的方法，如：$.ajax()、 $.get()、$.post()、$.getJSON()。

$.ajax()在异步请求中提交数据

> 在$.ajax()方法中通过 data 属性来存放提交的数据，支持 JSON 格 式的数据 提交普通格式数据 在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种 是通过 name=value&name=value 的结构。另一种是通过 JavaScript 对象 来指定提交数据。无论使用哪种方式在Servlet中都是通过 request.getParameter方法根据name获取value的。 通过 JavaScript 对象指定提交数据

data:{
        userid:100,
        username:"zhangsan"
    }

提交 JSON 格式数据

> 在$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交，通过 JSON.stringify()函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符 输入获取提交的 JSON 格式的数据。

data:JSON.stringify({name:value,name:value......})

在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。

$.ajax()处理响应中的 JSON 格式数据

> $.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型 处理。如果响应的是 一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数 中我们得到的直接就是 JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse()做格式的转换处理。

$.get()的使用

> $.get()方法是$.ajax()方法基于 get 方式发送异步请求的简化版。
> 
> 语法 $.get(url,function(result))

$.get(url,"name=value&name=value",function(result))

$.get(url,data,function(result))

$.get(url,
    {userid:1,username:"zhangsan",...},function(result))

$.post()的使用

> $.post()方法是$.ajax()方法基于 post 方式发送异步请求的简化版。
> 
> 语法 $.post(url,function(result))

$.post(url,"name=value&name=value",function(result))

$.post(url,data,function(result))

$.post(url,
    {userid:1,username:"zhangsan",...},function(result))

> $.getJSON()的使用

> $.getJSON()方法是$.ajax()方法基于get方式发送异步请求，并将响 应结果中JSON格式 的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返 回的数据必须是 JSON 格 式类型。$.getJSON()方法和 resp.setContentType("application/json")是一起使用的。

> 语法 $.getJSON(url,function(result))

$.getJSON(url,"name=value&name=value",function(result))

> $.getJSON(url,data,function(result))

$.getJSON(url,
    {userid:1,username:"zhangsan",...},function(result))

> serialize()方法的使用 将form 表单中的数据自动拼接成 name=value&name=value 结 构。

语法

var param = $("form").serialize();

> param 的值为：name=value&name=value

# Ajax 实战 #

## 创建项目 ##

创建Java项目

![6569fe3ea80c437c8b34265ae9f4754e.png][]

![f5fe82d0c6c94e1db4a4c9babf476b06.png][]

![86f232e5de284b0c93ad0856f715889c.png][]

点击finish完成项目创建，然后右键选择"add Framework Support..."

![1a20578149cd49d281f7fe7b2ea14dba.png][]

勾选红框中的选项，点击"OK"，完成后项目下出现web文件夹

![5df714d6712f4dde81c9b235f40126da.png][]

点击"project structure"

![99df212fed604e9596f10eb18af85877.png][]

点击Modules，选择"Web"模块，再按图示点击"+"，按默认路径， 再点击"OK"

![f5181a4c8e2c4ea7940b7dcafa2fea84.png][]

配置tomcat服务器

![8d3845373b59480a97f7a233b9e2bef9.png][]

选择Edit Configuration...

![5320348926a04ce7be7e165ac43a6a7e.png][]

选择Deployment标签，点击右侧"+"，选择要部署的项目，按默认就可以

![a4043f537bcf46f5a66beb1696082171.png][]

添加要部署的war文件，Application context设置为"/"，点击ok。

## 添加依赖包 ##

![60f44fda68444ff8bb67d905f34f9219.png][]

在"dependencies"标签中，点击右侧"+"，选择Library...，添加 Tomcat

![2f4d260d5a07413c81e35305ae1aa770.png][]

根据实际情况继续添加其它必要的依赖，如fastjson，commonslang等。

![bc7b2b2de7764c0faaeca74945c38f33.png][]

## 导入jquery包 ##

在web目录下，创建js文件夹，把jquery-3.6.0.js放到js目录下

![3bf8860e5114493eacb1d76b104fb9e2.png][]

## 创建实体类User ##

package com.itbaizhan.ajax.pojo;
    public class User {
        private Integer id;
        private String username;
        private String password;
        private Double salary;
        private String birthday;
        public Integer getId() {
            return id;
       }
        public void setId(Integer id) {
            this.id = id;
       }
        public String getUsername() { 
            return username;
       }
        public void setUsername(String username)
       {
            this.username = username;
       }
        public String getPassword() {
            return password;
       }
        public void setPassword(String password)
       {
            this.password = password;
       }
        public Double getSalary() {
            return salary;
       }
        public void setSalary(Double salary) {
            this.salary = salary;
       }
        public String getBirthday() {
            return birthday;
       }
        public void setBirthday(String birthday)
       {
            this.birthday = birthday;
     }
        public User(Integer id, String username,
        String password, Double salary, String birthday) {
            this.id = id;
            this.username = username;
            this.password = password;
            this.salary = salary;
            this.birthday = birthday;
       }
        public User() {
       }
    }

## 创建页面 ##

创建index.jsp中的静态部分

## 创建UserServlet ##

@WebServlet("/user.do")
    public class UserServlet extends HttpServlet
    {
     @Override
        public void init() throws ServletException {
       }
        
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            this.doPost(req, resp);
       }
        
         @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       }
    }

配置web.xml

<servlet>
         <servlet-name>UserServlet</servlet-name>
         <servlet-class>
            com.itbaizhan.ajax.servlet.UserServlet
         </servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>UserServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

## 查询用户列表 ##

页面相关

$(function () {
         //初始化用户数据
         getData();
     });
    // 获取页面初始化数据
    function getData(){
        $.getJSON("user.do", {flag:"getData"},function (result) {
            listUser(result);
       });
    }
    // 遍历数据生成数据
    function listUser(obj){
        var str ="";
        $.each(obj,function(){
            str+= "<tr align='center'>" +
                "<td id='"+this.id+"'>"+this.id +"</td>"+
                "<td>"+this.username+"</td>" +
                "<td>"+this.password+"</td>" +
                "<td>"+this.salary+"</td>" +
                "<td>"+this.birthday+"</td>" +
                "<td><a href='#' onclick='preUpdateUser("+this.id+")'>更新
    </a>  <a href='#' onclick='deleteUser("+this.id+")'>删除 </a>
    </td></tr>"
       });
        $("#tBody").prepend(str);
    }

servlet相关

@Override
    public void init() throws ServletException {
        ArrayList<User> list = new ArrayList<>();
        User user1 = new User(1,"zhangsan","123",2000d,"1997-09-01");
        User user2 = new User(2,"lisi","123",3000d,"1998-08-23");
        User user3 = new User(3,"zhaoliu","123",2500d,"1996-05-16");
        User user4 = new User(4,"wangwu","123",2080d,"1995-10-12");
        User user5 = new User(5,"zhengsan","123",3200d,"1999-12-20");
        User user6 = new User(6,"liugang","123",4200d,"1994-04-10");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        list.add(user5);
        list.add(user6);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }
    // 获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws IOException
    {
        List<User> list = (List<User>)
          this.getServletContext().getAttribute("list");
          String s = JSON.toJSONString(list);
          resp.setContentType("application/json");
          PrintWriter pw = resp.getWriter();
          pw.print(s);
          pw.flush();
          pw.close();
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
    ServletException, IOException {
        String flag = req.getParameter("flag");
        if("getData".equals(flag)){
            this.getData(req,resp);
       }
    }

## 添加用户 ##

页面相关

//添加按钮绑定点击事件
    $("#add").click(function(){
        addOrUpdateUser("addUser");
    });
    // 用户添加或者用户更新
    function addOrUpdateUser(flag){
        // 从页面中获取数据
        var userid = $("#id").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var salary = $("#salary").val();
        var birthday = $("#birthday").val();
        var data = {
            userid:userid,
            username:username,
            password:password,
            salary:salary,
            birthday:birthday,
            flag:flag
       }
        $.get("user.do",data,function(result){
            alert(result);
            location.reload();
       });
    }

### servlet相关 ###

/**
         * 处理添加用户请求
         * @param req
         * @param resp
         * @throws ServletException
         * @throws IOException
         */
    private void addUser(HttpServletRequest req, HttpServletResponse resp) throws IOException
    {
        User user = this.createUser(req);
        ServletContext servletContext = this.getServletContext();
        List<User> list = (List<User>)servletContext.getAttribute("list");
        list.add(user);
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("添加成功");
        pw.flush();
        pw.close();
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
    ServletException, IOException {
        String flag = req.getParameter("flag");
        if("getData".equals(flag)){
            this.getData(req,resp);
       }else if("addUser".equals(flag)){
            this.addUser(req,resp);
       }
    }
    // 获取请求数据
    private User createUser(HttpServletRequest
    req){
        String userid = req.getParameter("userid");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String salary = req.getParameter("salary");
        String birthday = req.getParameter("birthday");
        User user = new User();
        user.setId(Integer.parseInt(userid));
        user.setUsername(username);
        user.setPassword(password);
        user.setSalary(Double.valueOf(salary));
        user.setBirthday(birthday);
        return user;
    }

## 更新用户 ##

页面相关

// 更新之前的数据选择
    function preUpdateUser(userid){
        var arr = new Array();  
    $("#"+userid).closest("tr").children().each(
    function(index,ele){
            if(index <=4){
                arr[index]= ele.innerText
           }
       });
        $("#id").val(arr[0]);
        $("#id").attr("readonly",true);
        $("#username").val(arr[1]);
        $("#password").val(arr[2]);
        $("#salary").val(arr[3]);
        $("#birthday").val(arr[4]);
    }
    //更新按钮绑定点击事件
    $("#update").click(function(){
     addOrUpdateUser("updateUser");
    });
    // 用户添加或者用户更新
    function addOrUpdateUser(flag){
        // 从页面中获取数据
        var userid = $("#id").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var salary = $("#salary").val();
        var birthday = $("#birthday").val();
        var data = {
            userid:userid,
            username:username,
            password:password,
            salary:salary,
            birthday:birthday,
            flag:flag
       }
        $.get("user.do",data,function(result){
           alert(result);
           location.reload();
       });
    }

servlet相关

/**
         * 处理更新用户请求
         * @param req
         * @param resp
         * @throws IOException
         */
    private void updateUser(HttpServletRequest req,
                            HttpServletResponse resp) throws IOException{
        User user = this.createUser(req);
        ServletContext servletContext = this.getServletContext();
        List<User> userList = (List<User>) servletContext.getAttribute("list");
        //list转map
        Map<Integer, User> userMap = userList.stream().collect(Collectors.toMap(User::getId, Function.identity()));
        //根据id获取user
        User user1 = userMap.get(user.getId());
        //删除指定的user
        userList.remove(user1);
        //添加新的user
        userList.add(user);
        //按id排序
        userList.sort(new Comparator<User>() {
            @Override
            public int compare(User o1, User o2)
             {
                return o1.getId() - o2.getId();
           }
       });
        //输出至页面
        resp.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = resp.getWriter();
        pw.print("更新成功");
        pw.flush();
        pw.close();
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
    ServletException, IOException {
        String flag = req.getParameter("flag");
        if("getData".equals(flag)){
            this.getData(req,resp);
       }else if("addUser".equals(flag)){
            this.addUser(req,resp);
       }else if("updateUser".equals(flag)){
            this.updateUser(req,resp);
       }
    }

## 删除用户 ##

页面相关

// 删除用户
    function deleteUser(userid){
        $("#"+userid).closest("tr").remove();
     $.post("user.do", {userid:userid,flag:"delete"},function(result){
            alert(result)
       })
    }

servlet相关

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
    ServletException, IOException {
        String flag = req.getParameter("flag");
        if("getData".equals(flag)){
            this.getData(req,resp);
       }else if("addUser".equals(flag)){
            this.addUser(req,resp);
       }else if("updateUser".equals(flag)){
            this.updateUser(req,resp);
       }else if("delete".equals(flag)){
            this.deleteUser(req,resp);
       }
    }
    /**
         * 处理删除用户请求
         * @param req
         * @param resp
         * @throws ServletException
         * @throws IOException
         */
    private void deleteUser(HttpServletRequest req,
                            HttpServletResponse resp) throws ServletException, IOException{
        ServletContext servletContext = this.getServletContext();
        List<User> userList = (List<User>)servletContext.getAttribute("list");
        String userid = req.getParameter("userid");
        //list转map
        Map<Integer, User> userMap = userList.stream().collect(Collectors.toMap(User::getId, Function.identity()));
        //根据id获取user
        if(StringUtils.isNotEmpty(userid)){
            User user1 = userMap.get(Integer.parseInt(userid));
            //删除指定的user
            userList.remove(user1);
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("删除成功");
            pw.flush();
            pw.close();
       }else{
            resp.setContentType("text/plain;charset=utf-8");
            PrintWriter pw = resp.getWriter();
            pw.print("删除失败");
            pw.flush();
            pw.close();
       }
    }

运行效果

![a5d6c66e2f194b1d916dda6f5be3d828.png][]

[ecf321fbb87f483a897b560659623c5d.png]: https://img-blog.csdnimg.cn/ecf321fbb87f483a897b560659623c5d.png
[ad01802c5d1a435999e77d0c29f0a1e0.png]: https://img-blog.csdnimg.cn/ad01802c5d1a435999e77d0c29f0a1e0.png
[8fc345cdddae4bfd89613d956e9e40bd.png]: https://img-blog.csdnimg.cn/8fc345cdddae4bfd89613d956e9e40bd.png
[bea73edddb114f0ab019bbe8dce0e91f.png]: https://img-blog.csdnimg.cn/bea73edddb114f0ab019bbe8dce0e91f.png
[2f4a091db10f4cae8e38a212927ebe96.png]: https://img-blog.csdnimg.cn/2f4a091db10f4cae8e38a212927ebe96.png
[0ec52f09643b4918a59a5594b4997bb3.png]: https://img-blog.csdnimg.cn/0ec52f09643b4918a59a5594b4997bb3.png
[c41af980fc5b4b1faddd4a4680375532.png]: https://img-blog.csdnimg.cn/c41af980fc5b4b1faddd4a4680375532.png
[78c06fdfbccd4b3fba33a6cc925afd31.png]: https://img-blog.csdnimg.cn/78c06fdfbccd4b3fba33a6cc925afd31.png
[21035d97efc24bebb39f378e805f0f87.png]: https://img-blog.csdnimg.cn/21035d97efc24bebb39f378e805f0f87.png
[e7a70c8f1ae446908d186f271bf28868.png]: https://img-blog.csdnimg.cn/e7a70c8f1ae446908d186f271bf28868.png
[ef76f5e7fd464498a097f024598d9db7.png]: https://img-blog.csdnimg.cn/ef76f5e7fd464498a097f024598d9db7.png
[6569fe3ea80c437c8b34265ae9f4754e.png]: https://img-blog.csdnimg.cn/6569fe3ea80c437c8b34265ae9f4754e.png
[f5fe82d0c6c94e1db4a4c9babf476b06.png]: https://img-blog.csdnimg.cn/f5fe82d0c6c94e1db4a4c9babf476b06.png
[86f232e5de284b0c93ad0856f715889c.png]: https://img-blog.csdnimg.cn/86f232e5de284b0c93ad0856f715889c.png
[1a20578149cd49d281f7fe7b2ea14dba.png]: https://img-blog.csdnimg.cn/1a20578149cd49d281f7fe7b2ea14dba.png
[5df714d6712f4dde81c9b235f40126da.png]: https://img-blog.csdnimg.cn/5df714d6712f4dde81c9b235f40126da.png
[99df212fed604e9596f10eb18af85877.png]: https://img-blog.csdnimg.cn/99df212fed604e9596f10eb18af85877.png
[f5181a4c8e2c4ea7940b7dcafa2fea84.png]: https://img-blog.csdnimg.cn/f5181a4c8e2c4ea7940b7dcafa2fea84.png
[8d3845373b59480a97f7a233b9e2bef9.png]: https://img-blog.csdnimg.cn/8d3845373b59480a97f7a233b9e2bef9.png
[5320348926a04ce7be7e165ac43a6a7e.png]: https://img-blog.csdnimg.cn/5320348926a04ce7be7e165ac43a6a7e.png
[a4043f537bcf46f5a66beb1696082171.png]: https://img-blog.csdnimg.cn/a4043f537bcf46f5a66beb1696082171.png
[60f44fda68444ff8bb67d905f34f9219.png]: https://img-blog.csdnimg.cn/60f44fda68444ff8bb67d905f34f9219.png
[2f4d260d5a07413c81e35305ae1aa770.png]: https://img-blog.csdnimg.cn/2f4d260d5a07413c81e35305ae1aa770.png
[bc7b2b2de7764c0faaeca74945c38f33.png]: https://img-blog.csdnimg.cn/bc7b2b2de7764c0faaeca74945c38f33.png
[3bf8860e5114493eacb1d76b104fb9e2.png]: https://img-blog.csdnimg.cn/3bf8860e5114493eacb1d76b104fb9e2.png
[a5d6c66e2f194b1d916dda6f5be3d828.png]: https://img-blog.csdnimg.cn/a5d6c66e2f194b1d916dda6f5be3d828.png