typora-copy-images-to: img

Ajax

学习目标

• [ ] 了解Ajax的概念和作用

• [ ] 了解同步和异步的区别

• [ ] 能够使用jQuery的$.get()和$.post()发送Ajax请求

• [ ] 能够使用jQuery的$.ajax()方法发送Ajax请求

• [ ] 能够定义和解析json

• [ ] 能够使用Jackson转换json格式

• [ ] 能够使用fastjson转换json格式

第一章-JS的AJAX

知识点- AJAX的概述

1.目标

• 能够理解异步的概念

2.路径

• 什么是Ajax
• 什么是异步
• 为什么要学习Ajax

3.讲解

3.1 什么是AJAX

说白了:   AJax是可以做异步的请求,实现局部刷新一种客户端技术

3.2什么是异步

• 同步
  

• 异步
  

3.3为什么要学习AJAX

提升用户的体验。(异步)
实现页面局部刷新。
将部分的代码，写到客户端浏览器。

4.小结

1. 什么是Ajax: 可以用来实现异步请求, 进行局部刷新客户端技术

2. 为什么要学习Ajax?

   • 提升用户的体验。(异步)
   • 实现页面局部刷新。
   • 将部分的代码，写到客户端浏览器。

知识点-JS的Ajax入门【了解】

1.目标

    在网页上点击按钮, 点击按钮, 发送Ajax请求服务器,响应hello Ajax

2.步骤

第一步：创建异步请求对象。
第二步：打开连接。
第三步：发送请求。
第四步：设置监听对象改变所触发的函数,处理结果

3.讲解

3.1GET请求方式的入门

<script>
//声明一个发送异步请求的方法
        function fn1() {
            //使用js原生的代码发送异步的get请求
            //1. 创建一个ajax引擎对象
            var xhr = new XMLHttpRequest();
            //2. 建立和服务器的连接
            xhr.open("GET","/demo01?username=jay")
            //3. 发送请求
            xhr.send()
            //4. 处理响应
            //也就是怎么展示响应数据: 将响应数据展示到id为msg的div中
            xhr.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取响应数据
                    var responseText = xhr.responseText;
                    //展示响应数据
                    document.getElementById("msg").innerHTML = responseText
                }
            }
        }
</script>

3.2POST请求方式的入门

<script>
    //声明一个方法发送异步的post请求
        function fn2() {
            //使用js原生的代码发送异步的post请求
            //1. 创建一个ajax引擎对象
            var xhr = new XMLHttpRequest();
            //2. 创建连接
            xhr.open("POST","/demo01")
            //3. 发送请求
            //post请求携带参数之前，先要设置Content-Type请求头，指定请求参数类型
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("username=jay")
            //4. 处理响应
            xhr.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //获取响应数据
                    var responseText = xhr.responseText;
                    //展示响应数据
                    document.getElementById("msg").innerHTML = responseText
                }
            }
        }    
</script>

第二章-JQ的AJAX【重点】

知识点-JQ的AJAX介绍

1.目标

• 知道为什么要学习JQ的AJAX原因

2.讲解

2.1 为什么要使用JQuery的AJAX

因为传统(js里面)的AJAX的开发中，AJAX有两个主要的问题：
浏览器的兼容的问题 , 编写AJAX的代码太麻烦而且很多都是雷同的。
在实际的开发通常使用JQuery的Ajax  ,或者Vue里面的axios

2.2JQuery的Ajax的API

3.小结

1. 为什么要用JQ的Ajax?
   JS的Ajax处理浏览器适配问题, 写起来过于繁琐
   实际开发里面基本不会使用JS的AJAX, 一般使用JQ的AJAX或者VUE里面的axios

2. 掌握的方法

   • $.get(url, [data], [callback], [type])
   • $.post(url, [data], [callback], [type])
   • $.ajax([settings])

知识点-JQ的AJAX入门【重点】

1.目标

在网页上点击按钮, 发送Ajax请求服务器,响应hello ajax...
分别使用get,post,ajax三种方法

2.讲解

2.1get()

• get方式, 语法 $.get(url, [data], [callback], [type]); | 参数名称 | 解释 | | —- | —- | | url | 请求的服务器端url地址 | | data | 发送给服务器端的请求参数，格式是key=value；get请求的参数可以直接写在url后面 | | callback | 当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码 | | type | 预期的返回数据的类型(默认为text)，取值可以是 xml, html, script, json, text, _defaul等 |

• 实例

//声明一个方法使用jQuery的ajax发送异步的get请求
function fn3() {
    $.get("/demo01?username=tom",function (result) {
        //在这个回调函数中处理响应数据result
        //将响应数据展示在id为msg的div中
        $("#msg").html(result)
    })
}

2.2post()

• post方式, 语法 $.post(url, [data], [callback], [type]) | 参数名称 | 解释 | | —- | —- | | url | 请求的服务器端url地址 | | data | 发送给服务器端的请求参数，格式是key=value | | callback | 当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码 | | type | 预期的返回数据的类型(默认为text)，取值可以是 xml, html, script, json, text, _defaul等 |

• 实例

//声明一个方法使用jQuery的ajax发送异步的post请求
function fn4() {
    $.post("/demo01","username=jack",function (result) {
        //result就是服务器端的响应数据
        $("#msg").html(result)
    })
}

2.3 ajax() 了解

• 语法 $.ajax([settings])
  其中，settings是一个js字面量形式的对象，格式是{name:value,name:value… …}，常用的name属性名如下 | 属性名称 | 解释 | | —- | —- | | url | 请求的服务器端url地址 | | async | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false | | data | 发送到服务器的数据，可以是键值对形式，也可以是js对象形式 | | type | (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET” | | dataType | 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等 | | success | 请求成功后的回调函数 | | error | 请求失败时调用此函数 |

• 实例

//声明一个方法使用jQuery的ajax方法发送异步请求
function fn5() {
    $.ajax({
        url:"/demo01", //请求路径
        data:"username=lucy", //请求参数
        type:"POST", //请求方式
        success:function (result) {
            $("#msg").html(result)
        }, //请求成功时候的回调函数
        error:function () {
            $("#msg").html("服务器异常")
        } //请求失败时候的回调函数
    })
}

3.小结

1. $.get/post(请求路径,[请求参数],[function(result){}],[响应结果的类型]);
2. $.ajax({}) | 属性名称 | 解释 | | —- | —- | | url | 请求的服务器端url地址 | | async | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false | | data | 发送到服务器的数据，可以是键值对形式，也可以是js对象形式 | | type | (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET” | | dataType | 预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等 | | success | 请求成功后的回调函数 | | error | 请求失败时调用此函数 |

案例-使用JQ的Ajax完成用户名异步校验

1.需求分析

我们有一个网站，网站中都有注册的页面，当我们在注册的页面中输入用户名的时候，这个时候会提示，用户名是否存在。
![](https://gitee.com/tgl_bug/typora-table/raw/master/img/20210121132902.png#alt=img)

2,思路分析

步骤:

1. 导入jar包，拷贝配置文件、工具类、解决乱码的过滤器
2. 创建包结构
3. 编写前端代码发送异步请求
4. 编写Servlet代码接收请求、调用业务层的方法处理请求、响应数据给客户端
5. 编写业务层的代码处理请求
6. 编写Dao层的代码查询数据

3.代码实现

• 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <form action="#" method="post">
        <!--目标:当用户名输入完毕，输入框失去焦点的时候，要校验用户名是否已经被注册了-->
        用户名 <input type="text" name="username" onblur="checkUsername(this.value)">
        <span id="uSpan" style="color: red"></span>
    </form>
    <script>
        function checkUsername(username) {
            //发送异步请求校验用户名
            $.post("/user","action=checkUsername&username="+username,function (result) {
                //将响应数据展示到id为"uSpan"的标签中
                $("#uSpan").html(result)
            },"json")
        }
    </script>
</body>
</html>

• UserServlet代码

package com.itheima.web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.pojo.User;
import com.itheima.service.UserService;
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.lang.reflect.Method;
/**
 * 包名:${PACKAGE_NAME}
 *
 * @author Leevi
 * 日期2020-07-21  10:23
 */
@WebServlet("/user")
public class UserServlet extends HttpServlet {
    private UserService userService = new UserService();
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String action = request.getParameter("action");
        try {
            Class clazz = this.getClass();
            //根据方法名获取方法
            Method method = clazz.getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            //调用方法
            method.invoke(this,request,response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 校验用户名的方法
     * @param request
     * @param response
     */
    private void checkUsername(HttpServletRequest request, HttpServletResponse response) throws IOException {
        try {
            //1. 获取请求参数username的值
            String username = request.getParameter("username");
            //2. 调用业务层的方法，根据username查找用户
            User user = userService.findByUsername(username);
            //3. 判断user是否为null
            if (user != null) {
                //用户名不可用
                response.getWriter.writer("用户名已被占用");
            }else {
                //用户名可用
                response.getWriter.writer("用户名可用");
            }
        } catch (Exception e) {
            e.printStackTrace();
            //出现异常
            response.getWriter.writer("服务器异常");
        }
    }
}

• UserService的代码

public class UserService {
    private UserDao userDao = new UserDao();
    public User findByUsername(String username) throws SQLException {
        return userDao.findByUsername(username);
    }
}

• UserDao的代码

public class UserDao {
    private QueryRunner queryRunner = new QueryRunner(DruidUtil.getDataSource());
    public User findByUsername(String username) throws SQLException {
        String sql = "select * from user where username=?";
        User user = queryRunner.query(sql, new BeanHandler<>(User.class), username);
        return user;
    }
}

4.小结

当前案例存在问题:

服务器直接向客户端响应普通的字符串，客户端拿到了普通字符串之后，只能显示该字符串，没法根据服务器端的响应数据的不同而做一些自定义的处理，所以我们的想法是接下来将服务器端的响应数据封装成一个JavaBean对象

知识点-创建ResultBean用于封装项目的响应数据

分析

服务器要响应哪些数据给客户端?

1. 服务器的状态: 是否出现异常
2. 这次请求的处理结果: 比如说要显示在客户端的数据、用户名是否可用、联系人列表等等
3. 如果服务器出现异常，则要将服务器想给客户端看的异常信息响应给客户端

实现

封装的ResultBean的代码

package com.itheima.entry;
import java.io.Serializable;
/**
 * 包名:com.itheima.entry
 *
 * @author Leevi
 * 日期2020-07-21  10:47
 */
public class ResultBean implements Serializable {
    //flag 表示服务器是否异常
    private Boolean flag;
    //data 表示这次请求的处理结果
    private Object data;
    //errorMsg 表示服务器的异常信息
    private String errorMsg;
    public ResultBean() {
    }
    public ResultBean(Boolean flag) {
        this.flag = flag;
    }
    public ResultBean(Boolean flag, String errorMsg) {
        this.flag = flag;
        this.errorMsg = errorMsg;
    }
    public ResultBean(Boolean flag, Object data) {
        this.flag = flag;
        this.data = data;
    }
    public ResultBean(Boolean flag, Object data, String errorMsg) {
        this.flag = flag;
        this.data = data;
        this.errorMsg = errorMsg;
    }
    @Override
    public String toString() {
        return "ResultBean{" +
                "flag=" + flag +
                ", data=" + data +
                ", errorMsg='" + errorMsg + '\'' +
                '}';
    }
    public Boolean getFlag() {
        return flag;
    }
    public void setFlag(Boolean flag) {
        this.flag = flag;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    public String getErrorMsg() {
        return errorMsg;
    }
    public void setErrorMsg(String errorMsg) {
        this.errorMsg = errorMsg;
    }
}

小结

封装好ResultBean之后，服务器的响应数据就会封装在ResultBean对象中；然后再想办法将ResultBean对象的信息响应给客户端，但是客户端是无法解析ResultBean对象的，所以我们需要先将ResultBean对象转换成客户端能够认识的数据格式，然后再响应给客户端

1.目标

• 掌握json定义和解析的语法

2.路径

1. json简介
2. 语法介绍
3. 使用示例

3. 讲解

3.1.json简介

• 用我们自己的话来说: JSON就是一个容易生成和解析的数据格式;
  常用作客户端(前端,IOS,安卓)和服务器(JavaEE)之间的数据交换

3.2. 语法介绍

• 定义方式：

  • json是由键值对构成的，key和value之间使用冒号，个个键值对之间使用逗号隔开
  • json的value也可以是json类型
  • 如果有多个json对象，则可以存放在数组中

• 解析语法：

  • 获取json对象里的value值：json对象.key
  • 获取数组里指定索引的元素：数组[索引]

3.3. 使用示例

• 对象形式

var person01 = {name:"张三疯",age:189,address:"武当山"}
var person02 = { name:"张三疯",age:189,address:"武当山",wife:{
                name:"小花",
                age:18
            }
        }

• 数组形式

//二,JSON数组 [ele,ele]
var sons = [{"name": "张三", "age": 18}, {"name": "张四", "age": 19}];

• 混合形式

var person03 = {name:"张三疯", age:189, address:"武当山",
            wife:{
                name:"小花",
                age:18
            },
            sons:[
                {
                    nickanme:"张三",
                    age:1
                },
                {
                    nickname:"张四",
                    age:2
                }
            ]
        }

4.小结

1. JSON: 一种容易生成和解析的数据格式, 通常用作数据的交换

1. JSON格式

   • JSON对象 {key:value,key:value}

     • key是字符串
     • value是任意的合法数据类型
   • JSON数组 [ele,ele…]
   • 嵌套: 对象和数组的嵌套

知识点-使用Jackson将java对象转换成json字符串

1. 目标

• 能够使用转换工具Jackson，转换Java对象和json格式

2. 路径

1. 常见工具类介绍
2. Jackson的API介绍
3. Jackson的使用示例

3.讲解

3.1. 常见工具类

• 在Ajax使用过程中，服务端返回的数据可能比较复杂，比如List<User>；这些数据通常要转换成json格式，把json格式字符串返回客户端

• 常见的转换工具有：

  • Jackson：SpringMVC内置的转换工具
  • jsonlib：Java提供的转换工具(一般不用)
  • gson：google提供的转换工具(轻量级的框架)
  • fastjson：Alibaba提供的转换工具(效率高速度快)

3.2.Jackson的API介绍

• Jackson提供了转换的核心类：ObjectMapper
• ObjectMapper的构造方法：无参构造
• ObjectMapper的常用方法： | 方法 | 说明 | | —- | —- | | writeValueAsString(Object obj) | 把obj对象里的数据转换成json格式 |

3.3.java对象转成JSON

步骤:

1. 导入jar包

1. 创建ObjectMapper对象
2. 调用writeValueAsString(Object obj)

实现

public class TestJson {
    @Test
    public void test01() throws JsonProcessingException {
        //测试1: 使用jackson将map转换成json字符串
        Map map = new HashMap<>();
        map.put("name","张三");
        map.put("age",34);
        map.put("address","中国广东省深圳市");
        ObjectMapper objectMapper = new ObjectMapper();
        String str = objectMapper.writeValueAsString(map);
        System.out.println(str);
    }
    @Test
    public void test02() throws JsonProcessingException {
        //将User对象转换成JSON字符串
        User user = new User(1,"奥巴马","123456","123456@qq.com","18999999999");
        ObjectMapper objectMapper = new ObjectMapper();
        String str = objectMapper.writeValueAsString(user);
        System.out.println(str);
    }
    @Test
    public void test03() throws JsonProcessingException {
        //将ResultBean对象转换成json字符串
        User user = new User(1,"奥巴马","123456","123456@qq.com","18999999999");
        ResultBean resultBean = new ResultBean(true, user, null);
        ObjectMapper objectMapper = new ObjectMapper();
        String str = objectMapper.writeValueAsString(resultBean);
        System.out.println(str);
    }
    @Test
    public void test04() throws JsonProcessingException {
        //使用jackson将List<User>的集合转换成json字符串
        List<User> userList = new ArrayList<>();
        userList.add(new User(1,"奥巴马","123456","123456@qq.com","18999999999"));
        userList.add(new User(2,"周杰棍","654321","654321@qq.com","18666666666"));
        userList.add(new User(3,"王丽红","777777","777777@qq.com","18777777777"));
        ObjectMapper objectMapper = new ObjectMapper();
        String str = objectMapper.writeValueAsString(userList);
        System.out.println(str);
    }
    @Test
    public void test05() throws JsonProcessingException {
        //将userList存储到ResultBean对象中
        List<User> userList = new ArrayList<>();
        userList.add(new User(1,"奥巴马","123456","123456@qq.com","18999999999"));
        userList.add(new User(2,"周杰棍","654321","654321@qq.com","18666666666"));
        userList.add(new User(3,"王丽红","777777","777777@qq.com","18777777777"));
        ResultBean resultBean = new ResultBean(true, userList, "显示正常");
        ObjectMapper objectMapper = new ObjectMapper();
        String str = objectMapper.writeValueAsString(resultBean);
        System.out.println(str);
    }

小结

• Map对象或者JavaBean对象转换成json的时候会得到一个json字符串
• List或者List转换成json的时候会得到一个json数组的字符串

知识点-fastjson转换工具

1.目标

• 能够使用转换工具Fastjson，转换Java对象和json格式

2.路径

1. Fastjson的API介绍
2. Fastjson的使用示例

3.讲解

3.1. fastjson的API介绍

• fastjson提供了核心类：JSON
• JSON提供了一些常用的==静态==方法： | 方法 | 说明 | | —- | —- | | toJSONString(Object obj) | 把obj对象里的数据转换成json格式 |

3.2. java对象转成json

步骤

1. 导入jar包
   

2. 调用JSON.toJSONString(Object obj);

实现

@Test
public void test06(){
    //使用fastjson将user对象转换成json字符串
    User user = new User(1,"奥巴马","123456","123456@qq.com","18999999999");
    String jsonStr = JSON.toJSONString(user);
    System.out.println(jsonStr);
}
//其它的map、list转成json对象也是一样的调用JSON.toJSONString(obj)实现

4.小结

1. fastJSON: 阿里巴巴提供的json和java对象互转工具

2. java对象转成json

   • JSON.toJsonString(Object obj)

案例三：能够完成自动补全的(返回JSON数据)

1.需求

实现一个搜索页面，在文本框中输入一个值以后(键盘抬起的时候)，给出一些提示
![](https://gitee.com/tgl_bug/typora-table/raw/master/img/20210121132908.gif#alt=img)

2.思路分析

1. 创建数据库和页面, 实体类
2. 给搜索框设置键盘抬起事件

inputEle.keyup(function(){
    //1.获得用户输入关键词
    //2.发送Ajax请求WordServlet 携带关键词, 获得响应的数据
    //3.解析响应的数据 填充页面
});

1. 创建WordServlet

//1.获得请求参数(关键词)
//2.调用业务 根据关键词获得List<Words> list
//3.把list转成json 响应

1. 创建WordService

public List<Words> findByKeyWord(String keyWord){
    //调用Dao 查询
}

1. 创建WordDao

SELECT * FROM words WHERE word LIKE '%a%' LIMIT 0,5
SELECT * FROM words WHERE word LIKE ? LIMIT 0,5

3.代码实现

3.1.环境的准备

• 创建数据库

create table words(
    id int primary key auto_increment,
    word varchar(50)
);
insert into words values (null, 'all');
insert into words values (null, 'after');
insert into words values (null, 'app');
insert into words values (null, 'apple');
insert into words values (null, 'application');
insert into words values (null, 'applet');
insert into words values (null, 'and');
insert into words values (null, 'animal');
insert into words values (null, 'back');
insert into words values (null, 'bad');
insert into words values (null, 'bag');
insert into words values (null, 'ball');
insert into words values (null, 'banana');
insert into words values (null, 'bear');
insert into words values (null, 'bike');
insert into words values (null, 'car');
insert into words values (null, 'card');
insert into words values (null, 'careful');
insert into words values (null, 'cheese');
insert into words values (null, 'come');
insert into words values (null, 'cool');
insert into words values (null, 'dance');
insert into words values (null, 'day');
insert into words values (null, 'dirty');
insert into words values (null, 'duck');
insert into words values (null, 'east');
insert into words values (null, 'egg');
insert into words values (null, 'every');
insert into words values (null, 'example');

• 创建JavaBean ``` package com.itheima.bean;

import java.io.Serializable;

public class Words implements Serializable{

private int id;
private String word;
public int getId() {
    return id;
}
public void setId(int id) {
    this.id = id;
}
public String getWord() {
    return word;
}
public void setWord(String word) {
    this.word = word;
}
@Override
public String toString() {
    return "Words{" +
            "id=" + id +
            ", word='" + word + '\'' +
            '}';
}

}

- 
导入jar,工具类, 配置文件
- 
创建页面,demo06.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
    <h1>黑马</h1>
    <input id="inputId" type="text" style="width: 500px; height: 38px;" /><input
      type="button" style="height: 38px;" value="黑马一下" />
    <div id="divId"
         style="width: 500px; border: 1px red solid; height: 300px; position: absolute; left: 394px;">
        <table id="tabId" width="100%" height="100%"  border="1px">
            <tr><td>aaaa</td></tr>
            <tr><td>bbbb</td></tr>
            <tr><td>cccc</td></tr>
            <tr><td>dddd</td></tr>
            <tr><td>eeee</td></tr>
        </table>
    </div>
</center>

3.2实现

• demo06.htm

<script>
    //给搜索框设置键盘抬起事件
    $("#inputId").keyup(function () {
        //1.获得用户输入关键词
        var keyword = this.value;
        if (keyword=="" || keyword==null){
            //隐藏
            $("#divId").hide(100);
            return;
        }
        //2.发送Ajax请求WordServlet 携带关键词, 获得响应的数据
        $.post('word',{keyword:keyword},function (result) {
            if (result==""){
                //隐藏
                $("#divId").hide(100);
                return;
            }
            //3.解析响应的数据 填充页面
            //遍历 json数组, 每遍历一次 就是一个词语 就对应一行tr
            var trHtml="";
            $(result).each(function (i,obj) {
                trHtml+="<tr><td>"+obj.word+"</td></tr>";
            });
            $("#tabId").html(trHtml);
            //显示
            $("#divId").show(100);
        },'json');  
    });
</script>

• WordServlet

package com.itheima.web;
import com.alibaba.fastjson.JSON;
import com.itheima.bean.Words;
import com.itheima.service.WordService;
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.util.List;
/**
 * @Description:
 * @Author: yp
 */
@WebServlet("/word")
public class WordServlet extends HttpServlet {
    private WordService wordService = new WordService();
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            //1.获得请求参数(关键词)
            String keyword = request.getParameter("keyword");
            //2.调用业务 根据关键词获得List<Words> list
            List<Words> list = wordService.findByKeyWord(keyword);
            System.out.println("list="+list);
            //3.把list转成json 响应
            String jsonStr = JSON.toJSONString(list);
            System.out.println("jsonStr=" + jsonStr);
            response.getWriter().print(jsonStr);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

• WordService

package com.itheima.service;
import com.itheima.bean.Words;
import com.itheima.dao.WordDao;
import java.util.List;
/**
 * @Description:
 * @Author: yp
 */
public class WordService {
    private WordDao wordDao = new  WordDao();
    /**
     * 根据关键词查询
     * @param keyword
     * @return
     */
    public List<Words> findByKeyWord(String keyword) throws Exception {
       return wordDao.findByKeyWord(keyword);
    }
}

• WordDao

public class WordDao {
    private QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
    public List<Words> findByKeyWord(String keyword) throws Exception {
        String sql = "SELECT * FROM words WHERE word LIKE ? LIMIT 0,5";
        return queryRunner.query(sql, new BeanListHandler<Words>(Words.class), "%" + keyword + "%");
    }
}

4. 小结

补充: 将json字符串转换成Java对象

1. 使用jackson将json字符串转换成java对象

1.1 API介绍

• 其中TypeReference，com.fasterxml.jackson.core.type.TypeReference

  • 是一个抽象类，用于配置完整的泛型映射信息，避免泛型丢失的问题。用法示例：

// List<Integer> 类型的映射信息
TypeReference ref1 = new TypeReference<List<Integer>>() {};
// List<User> 类型的映射信息
TypeReference ref2 = new TypeReference<List<User>>() {};
// Map<String,User> 类型的映射信息
TypeReference ref3 = new TypeReference<Map<String,User>>(){};

1.2 使用jackson将json字符串转换JavaBean对象或者Map

@Test
//把json转成JavaBean(user对象)
public void test06() throws IOException {
    String jsonStr = "{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"}";
    //1.调用JSON.parseObject(String json,Class clazz);
    //转换成user
    User user = JSON.parseObject(jsonStr, User.class);
    System.out.println(user);
    //转换成map
    Map map = JSON.parseObject(jsonStr, Map.class);
    System.out.println(map);
}

1.3 使用jackson将json数组字符串转换成List

@Test
//把json转成List<JavaBean>对象
public void test07() throws Exception {
    String jsonStr = "[{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"},{\"id\":2,\"username\":\"ls\",\"password\":\"123456\",\"email\":\"ls@163.com\",\"phone\":\"1386781898\"},{\"id\":3,\"username\":\"ww\",\"password\":\"123456\",\"email\":\"ww@163.com\",\"phone\":\"1386782898\"}]";
    //1.创建ObjectMapper对象
    ObjectMapper objectMapper = new ObjectMapper();
    //2.调用readValue()
    TypeReference<List<User>> ref = new TypeReference<List<User>>(){};
    List<User> list = objectMapper.readValue(jsonStr, ref);
    System.out.println(list);
}

2. 使用fastjson将json字符串转换成java对象

2.1 API 介绍

2.2 使用fastjson将json字符串转换成JavaBean对象或者Map

@Test
    //把json转成JavaBean(user对象)
    public void test08() throws IOException {
        String jsonStr = "{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"}";
        //1.调用JSON.parseObject(String json,Class clazz);
        User user = JSON.parseObject(jsonStr, User.class);
        System.out.println(user);
    }
    @Test
    //把json转成Map
    public void test09() throws IOException {
        String jsonStr = "{\"id\":1,\"username\":\"zs\",\"password\":\"123456\",\"email\":\"zs@163.com\",\"phone\":\"1386789898\"}";
        //1.调用JSON.parseObject(String json,Class clazz);
        Map map = JSON.parseObject(jsonStr, Map.class);
        System.out.println(map);
    }

2.3 使用fastjson将json字符串转换成List

@Test
public void test11(){
    //使用fastjson将json数组的字符串，转换成List<User>
    String jsonArr = "[{\"id\":1,\"username\":\"奥巴马\",\"password\":\"123456\",\"email\":\"123456@qq.com\",\"phone\":\"18999999999\"},{\"id\":2,\"username\":\"周杰棍\",\"password\":\"654321\",\"email\":\"654321@qq.com\",\"phone\":\"18666666666\"},{\"id\":3,\"username\":\"王丽红\",\"password\":\"777777\",\"email\":\"777777@qq.com\",\"phone\":\"18777777777\"}]";
    List<User> userList = JSON.parseArray(jsonArr, User.class);
    for (User user : userList) {
        System.out.println(user.getUsername());
    }
}

补充案例-将联系人增删改查改成异步

查询所有功能改成异步

• 创建一个list.html页面，在页面加载的时候发送异步请求获取所有联系人的信息

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <!-- 使用Edge最新的浏览器的渲染方式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>联系人信息展示页面</title>
        <!-- 1. 导入CSS的全局样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
        <script src="js/jquery-2.1.0.min.js"></script>
        <!-- 3. 导入bootstrap的js文件 -->
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            td, th {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h3 style="text-align: center">显示所有联系人</h3>
            <table border="1" class="table table-bordered table-hover">
                <tr class="success">
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>籍贯</th>
                    <th>QQ</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8" align="center"><a class="btn btn-primary" href="/add.html">添加联系人</a></td>
                    </tr>
                </tfoot>
            </table>
            <script>
                //当这个页面加载的时候，就发送一个异步请求给服务器，获取所有联系人的信息
                $.get("/linkman?action=findAll",function (result) {
                    if (result.flag) {
                        //服务器没有异常
                        //取出要显示在页面的结果
                        var linkmanList = result.data;
                        //遍历出每一个linkMan
                        $.each(linkmanList,function (index,linkman) {
                            //每遍历出一条数据，就往tbody中添加一行
                            $("tbody").append("<tr>\n" +
                                              "                <td>"+(index+1)+"</td>\n" +
                                              "                <td>"+linkman.name+"</td>\n" +
                                              "                <td>"+linkman.sex+"</td>\n" +
                                              "                <td>"+linkman.age+"</td>\n" +
                                              "                <td>"+linkman.address+"</td>\n" +
                                              "                <td>"+linkman.qq+"</td>\n" +
                                              "                <td>"+linkman.email+"</td>\n" +
                                              "                <td><a class=\"btn btn-default btn-sm\" href=\"/linkman?action=findOne&id=${linkman.id}\">修改</a>&nbsp;\n" +
                                              "                    <a class=\"btn btn-default btn-sm\" href=\"javascript:;\" onclick=\"deleteLinkMan('${linkman.name}','${linkman.id}')\">删除</a></td>\n" +
                                              "            </tr>")
                        })
                    }
                },"json")
            </script>
        </div>
    </body>
</html>

• LinkManServlet中findAll()方法的代码

/**
 * 查询所有联系人
 */
private void findAll(HttpServletRequest request,HttpServletResponse response) throws IOException {
    ResultBean resultBean = new ResultBean(true);
    try {
        //1. 调用业务层的方法，查询所有联系人
        List<LinkMan> linkManList = linkManService.findAll();
        //2. 将响应数据封装到ResultBean对象中
        resultBean.setData(linkManList);
    } catch (Exception e) {
        e.printStackTrace();
        //查询失败
        resultBean.setFlag(false);
        resultBean.setErrorMsg("查询联系人失败");
    }
    //将resultBean对象转换成json字符串，响应给客户端
    String jsonStr = JSON.toJSONString(resultBean);
    response.getWriter().write(jsonStr);
}

添加联系人改成异步

• 创建一个add.html页面，屏蔽表单的同步提交，当点击提交按钮的时候绑定点击事件异步提交请求

<!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <!-- 使用Edge最新的浏览器的渲染方式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>添加用户</title>
        <!-- 1. 导入CSS的全局样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
        <script src="js/jquery-2.1.0.min.js"></script>
        <!-- 3. 导入bootstrap的js文件 -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <center><h3>添加联系人页面</h3></center>
            <div id="msg" style="color: red"></div>
            <form action="/linkman" id="myForm" method="post" onsubmit="return false">
                <input type="hidden" name="action" value="add">
                <div class="form-group">
                    <label for="name">姓名:</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <input type="radio" name="sex" value="男" checked="checked"/>男
                    <input type="radio" name="sex" value="女"/>女
                </div>
                <div class="form-group">
                    <label for="age">年龄：</label>
                    <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="address">籍贯：</label>
                    <select name="address" class="form-control" id="address">
                        <option value="广东">广东</option>
                        <option value="广西">广西</option>
                        <option value="湖南">湖南</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="qq">QQ：</label>
                    <input type="text" class="form-control" name="qq" id="qq" placeholder="请输入QQ号码"/>
                </div>
                <div class="form-group">
                    <label for="email">Email：</label>
                    <input type="text" class="form-control" name="email" id="email" placeholder="请输入邮箱地址"/>
                </div>
                <div class="form-group" style="text-align: center">
                    <input class="btn btn-primary" type="submit" value="提交" onclick="addLinkman()"/>
                    <input class="btn btn-default" type="reset" value="重置" />
                    <input class="btn btn-default" type="button" value="返回" />
                </div>
            </form>
            <script>
                //声明一个添加联系人的方法
                function addLinkman() {
                    //获取表单中的所有请求参数
                    var parameter = $("#myForm").serialize();
                    //发送异步请求给"/linkman",请求方式post，提交表单中的所有数据
                    $.post("/linkman",parameter,function (result) {
                        if (result.flag) {
                            //添加成功
                            //跳转到list.html
                            location.href = "/list.html"
                        }else {
                            //添加失败
                            $("#msg").html(result.errorMsg)
                        }
                    },"json")
                }
            </script>
        </div>
    </body>
</html>

• LinkManServlet的add()方法的代码

/**
 * 添加联系人
 * @param request
 * @param response
 * @throws IOException
 */
private void add(HttpServletRequest request,HttpServletResponse response) throws IOException {
    ResultBean resultBean = new ResultBean(true);
    try {
        //1. 获取所有请求参数
        Map<String, String[]> parameterMap = request.getParameterMap();
        //2. 将请求参数封装到LinkMan对象中
        LinkMan linkMan = new LinkMan();
        BeanUtils.populate(linkMan,parameterMap);
        //3. 调用业务层的方法添加联系人
        linkManService.add(linkMan);
        //4. 添加成功
        // 告诉客户端添加成功
    } catch (Exception e) {
        e.printStackTrace();
        //告诉客户端添加失败
        resultBean.setFlag(false);
        resultBean.setErrorMsg("添加失败");
    }
    String jsonStr = JSON.toJSONString(resultBean);
    response.getWriter().write(jsonStr);
}

删除功能改成异步

• 前端list.html代码

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
    <head>
        <!-- 指定字符集 -->
        <meta charset="utf-8">
        <!-- 使用Edge最新的浏览器的渲染方式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比，为1:1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>联系人信息展示页面</title>
        <!-- 1. 导入CSS的全局样式 -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
        <script src="js/jquery-2.1.0.min.js"></script>
        <!-- 3. 导入bootstrap的js文件 -->
        <script src="js/bootstrap.min.js"></script>
        <style type="text/css">
            td, th {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h3 style="text-align: center">显示所有联系人</h3>
            <table border="1" class="table table-bordered table-hover">
                <tr class="success">
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>籍贯</th>
                    <th>QQ</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="8" align="center"><a class="btn btn-primary" href="/add.html">添加联系人</a></td>
                    </tr>
                </tfoot>
            </table>
            <script>
                //当这个页面加载的时候，就发送一个异步请求给服务器，获取所有联系人的信息
                $.get("/linkman?action=findAll",function (result) {
                    if (result.flag) {
                        //服务器没有异常
                        //取出要显示在页面的结果
                        var linkmanList = result.data;
                        //遍历出每一个linkMan
                        $.each(linkmanList,function (index,linkman) {
                            //每遍历出一条数据，就往tbody中添加一行
                            $("tbody").append("<tr>\n" +
                                              "                <td>"+(index+1)+"</td>\n" +
                                              "                <td>"+linkman.name+"</td>\n" +
                                              "                <td>"+linkman.sex+"</td>\n" +
                                              "                <td>"+linkman.age+"</td>\n" +
                                              "                <td>"+linkman.address+"</td>\n" +
                                              "                <td>"+linkman.qq+"</td>\n" +
                                              "                <td>"+linkman.email+"</td>\n" +
                                              "                <td><a class=\"btn btn-default btn-sm\" href=\"/update.html?id="+linkman.id+"\">修改</a>&nbsp;\n" +
                                              "                    <a class=\"btn btn-default btn-sm\" href=\"javascript:;\" onclick=\"deleteLinkMan('"+linkman.name+"','"+linkman.id+"')\">删除</a></td>\n" +
                                              "            </tr>")
                        })
                    }
                },"json")
                //声明一个删除联系人的方法
                function deleteLinkMan(name,id) {
                    //1. 弹出一个确认框
                    var flag = confirm("你确定要删除"+name+"吗?");
                    if (flag) {
                        //确定要删除
                        //向LinkManServlet发送异步请求，并且携带要删除的联系人的id
                        $.post("/linkman","action=delete&id="+id,function (result) {
                            if (result.flag) {
                                //删除成功，跳转到list.html页面
                                location.href = "/list.html"
                            }else {
                                //删除失败
                                alert(result.errorMsg)
                            }
                        },"json")
                    }
                }
            </script>
        </div>
    </body>
</html>