Ajax学习笔记

静止了所有花开

已于 2024-10-27 20:03:35 修改

阅读量895

点赞数 8

文章标签： ajax 学习笔记

于 2024-10-27 18:30:13 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67226963/article/details/143270874

版权

一、Ajax简介

1. Ajax的应用场景

1.在线视频、直播平台等…评论实时更新、点赞、小礼物、…
2.会员注册时的信息验证，手机号、账号唯一
3.百度关键搜索补全功能

2. Ajax简介

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

3. 同步方式与异步方式区别

同步方式发送请求 :
发送一个请求，需要等待响应返回，然后才能够发送下一个请求，如果该请求没有响应，不能发送下一个请求，客户端会处于一直等待过程中。
异步方式发送请求 :
发送一个请求，不需要等待响应返回，随时可以再发送下一个请求，即不需要等待。

以下所有内容整合到一个JavaWeb项目中，用到的所有依赖文件如下图所示

二、JS原生方式实现异步

1. 实现步骤

1. 定义一个XMLHttpRequest核心对象;
2. 通过核心对象.open方法给当前对象提供访问方式、URL等。
3. 发送当前的请求至指定的URL
4. 接收返回值并处理
案例需求
需求:
前台页面通过一个按钮向后台发送一个Ajax请求，后台做完处理后向前台页面响应一段文本信息显示在页面上。

JSP代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Js原生方法实现异步Ajax</title>
    <script type="text/javascript">
        function testJsAjax(){
            //1、创建核心对象
            var xmlhttp = new XMLHttpRequest();
            //2、通过核心对象方法给当前的对象提供访问路径和URL路径
            xmlhttp.open("GET","jsAjax?name=Tom",true);
            //3、发送当前的请求至指定的URL
            xmlhttp.send();
            //4、接收返回值并处理
            xmlhttp.onreadystatechange = function () {
                //xmlhttp.readyState==4 代表XMLHttpRequest对象读取服务器的响应结束。xmlhttp.status==200代表响应成功
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    var msg = xmlhttp.responseText;
                    document.getElementById("msg").innerHTML=msg;
                }
            }
        }
    </script>
</head>
<body>
<div id="msg"></div>
<input type="button" name="btn" value="JsOriginalAjax" onclick="testJsAjax()">
</body>
</html>

Servlet控制层代码

package com.jn.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
@WebServlet("/jsAjax")
public class JsAjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        //获取名称
        String name = req.getParameter("name");
        System.out.println(name);

        //响应
        resp.getWriter().write("Response Successful");
    }
}

三、jQuery方式实现异步

        JS版的Ajax仅做为了解，我们重点学习jQuery版的Ajax，jQuery是一个优秀的js框架，自然对JS原生的Ajax进行了封装，封装后的Ajax的操作方法更简洁，功能更强大，这也是程序员最普遍使用，语法结构简单，代码可读性好。
与Ajax操作相关的jQuery方法经常使用的有三种：
请求方式   语法
Ajax请求   $.ajax([settings])
GET请求   $.get(url, [data], [callback], [type])
POST请求   $.post(url, [data], [callback], [type])

1. Ajax请求

语法格式:
$.ajax({
url:"",
data:{},
type:"post/get",
async:true,
dataType:"text",
success:function(obj){

},
error:function(){

}
})
属性解析:
参数名称   描述
url   请求的服务器端url地址, 与form表单中的action一样，都是代表请求的路径
data   前台需要向后台传递的数据（键值对形式）
type   和form表单中method对应，代表请求类型 get/post
async   取值是布尔类型true/false，分别表示异步和同步，默认为true(异步)，一般不建议写
dataType   回传的数据类型。text、xml、html、json...
success   成功的回调函数,参数obj表示返回值
error   失败的回调函数，一般不写
注意事项:
1、每个属性后都要跟随一个英文逗号，最后一个不用。
2、每一个属性都是键值对的形式存在，中间用英文冒号:隔开
3、data:{} 是一个特殊的写法，值是一个{}，里面使用键值对存储
例如：data:{“键1”:值1, “键2”:值2, “键3”:值3}
4、以上属性没有先后顺序要求

Jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Jquery实现Ajax的请求</title>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        //页面加载时间
        $(function () {
            //为按钮绑定点击事件
            $("#btn").click(function () {
                $.ajax({
                    url:"ajaxTest",
                    data:{"uname":"Tom","age":18},
                    type:"GET",
                    dataType:"text",
                    async:true,//一般省略不写
                    success:function (obj) {
                        //将控制层操作成功的响应信息通过弹窗展示
                        alert(obj);
                    },
                    error:function () {
                        alert("error")
                    }

                })
            })
        })
    </script>
</head>
<body>
<input type="button" id="btn" value="Ajax Request">
</body>
</html>

Servlet控制层代码

package com.jn.servlet;



import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/ajaxTest")//访问地址与ajax里面的访问路径一致
public class AjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取页面传递过来的参数
        String uname = req.getParameter("uname");
        String age = req.getParameter("age");
        System.out.println("Name:" + uname + "\tAge:" + age);

        //制造一个错误，然后测试ajax的错误回调函数
        //System.out.println(1 / 0);

        //响应文本
        resp.getWriter().write("Response Ok");
    }
}

效果演示

2. GET请求

语法格式:
$.get(url, [data], [callback], [type]);
属性解析:
参数名称   描述
url   请求的服务器端url地址, 与form表单中的action一样，都是代表请求的路径
data   前台需要向后台传递的数据（键值对形式）
callback   当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type   预期的返回数据的类型，取值可以是 text、xml、html、json...
注意事项:
这种写法功能和$.ajax是一样的，但是严格要求属性顺序。

Jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>GET请求实现异步</title>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.get(
                    "getTest",
                    {"uname":"Tom","age":18},
                    function (obj) {
                        //接收响应的文本信息
                        alert(obj);
                    },
                    "text"
                )
            })
        })
    </script>
</head>
<body>
<input type="button" id="btn" value="Ajax Request">
</body>
</html>

Servlet控制层代码

package com.jn.servlet;


import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/getTest")
public class GetServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取页面参数
        String uname = req.getParameter("uname");
        String age = req.getParameter("age");
        System.out.println("Name:" + uname + "\tAge:" + age);

        //响应
        resp.getWriter().write("Response Ok");
    }
}

效果演示

3. POST请求

语法格式:
$.post(url, [data], [callback], [type]);
属性解析:
参数名称   描述
url   请求的服务器端url地址, 与form表单中的action一样，都是代表请求的路径
data   前台需要向后台传递的数据（键值对形式）
callback   当请求成功后的回掉函数，可以在函数体中编写我们的逻辑代码
type   预期的返回数据的类型，取值可以是 text、xml、html、json...

注意事项:
这种写法功能和$.ajax是一样的，但是严格要求属性顺序。
4. $.ajax与$.get|$.post异同
相同点：都是jQuery封装的方法实现异步交互。

不同点：
$.ajax()是jQuery的第一次封装，使用时稍显麻烦，但是功能强大，覆盖了get和post请求，有错误调试能力，写法顺序可以改变。

$.post()和$.get()是jQuery Ajax的第二次封装，由于$.Ajax()写法过于臃肿，简化为$.post()和$.get()，功能是相同的没有区别。但是写法要求更高，顺序不能改变。

Jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Post请求实现异步</title>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#bt").click(function () {
               $.post(
                   "postTest",
                   {"uname":"Bob","age":18},
                   function (obj) {
                       alert(obj);
                   },
                   "text"
               )
            })
        })
    </script>

</head>
<body>
<input type="button" id="bt" value="Post请求实现异步">
</body>
</html>

Servlet控制层代码

package com.jn.servlet;


import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;

@WebServlet("/postTest")
public class PostServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取页面参数
        String uname = req.getParameter("uname");
        String age = req.getParameter("age");
        System.out.println("Post Name:" + uname + "\tPost Age:" + age);

        //响应
        resp.getWriter().write("Response Successful");
    }
}

效果演示

四、Ajax校验用户是否唯一案例

案例需求

在用户注册页面，输入用户名，当用户名输入框失去焦点时，发送异步请求，将输入框的用户名传递给服务器端进行是否存在的校验。

实现步骤

1、输入框焦点事件

2、发送post请求

3、指定字符串判断

4、前端页面响应

Jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户唯一检验案例</title>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $("#uname").blur(function () {
                var uname = $("#uname").val();
                // 判断用户名不为空
                var req = /^\s*$/;
                if (req.test(uname)) {
                    $("#msg").html("用户名不能为空").css("color", "red");
                    return;
                }
                // 发送 ajax 请求
                $.post(
                    "regist",
                    {"uname": uname},
                    function (obj) {
                        // 修改这里的判断逻辑
                        if (obj === "false") {
                            $("#msg").html("用户名已被占用").css("color", "red");
                        } else {
                            $("#msg").html("可用的用户名").css("color", "green");
                        }
                    },
                    "text"
                )
            })
        })
    </script>
</head>
<body>
<p>
    用户名: <input type="text" id="uname" name="uname">
    <span id="msg"></span>
</p>
<p>
    <input type="button" value="注册">
</p>
</body>
</html>

Servlet控制层代码

package com.jn.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashSet;
import java.util.Set;

@WebServlet("/regist")
public class RegisterServlet extends HttpServlet {
    @Override
    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //解决中文乱码问题
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String uname = request.getParameter("uname");
        Boolean flag;
        //判断
        if("liuyan".equals(uname)){
            flag = true;
        }else{
            flag = false;
        }
        // 响应
        PrintWriter writer = response.getWriter();
        writer.print(!flag);
    }
}

效果演示

五、Json

（一）、Ajax的返回值类型

Ajax支持多种返回值类型：
    XML：太麻烦，解析太费劲，已经不使用
    HTML：网页，其实质和返回文本一样，没区别，一般使用文本代替
    Script：直接返回脚本
    Text（文本）：（默认返回类型）字符串类型，返回直接接收字符串
    Json：返回是一个js对象，脚本中可以直接操作这个对象，非常方便
    Jsonp：和Json一样，只不过这个支持跨域访问。

（二）、JSON

1、JSON数据格式

（1）. JSON介绍

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

（2）. JSON语法格式

JSON对象的语法有三种：对象、数组、混合模式

类型  语法 解释
对象类型    {name:value,name:value...} 其中name是字符串类型，而value是任意类型
数组类型    [value,value,value...] 其中value是任意类型
混合类型    [{},{}... ...] 或 {name:[]... ...}  合理包裹嵌套对象类型和数组类型

（3）. JSON格式书写规范

1.使用{}和[]书写，{}表示对象类型，[]表示数组类型
2.对象类型中每组数据之间用逗号隔开，每组中的关键字与值之间用冒号隔开
3.数组类型中每个值之间用逗号隔开，最后一个值后面不要加逗号

2、JSON工具使用

JSON在线解析工具：http://www.bejson.com/
作用：
1.校验JSON数据的语法是否正确
2.将不规范的JSON格式数据进行格式化

3、JSON数据的应用

json的转换工具是通过java封装好的一些jar工具包，直接将java对象或集合转换成json格式的字符串。

4、常见的json转换工具

工具名称    介绍
Jsonlib Java 类库，需要导入的jar包较多
Gson    google提供的一个简单的json转换工具
Fastjson    alibaba技术团队提供的一个高性能的json转换工具
Jackson 开源免费的json转换工具，springmvc转换默认使用jackson

1) 导入json相关jar包
2) 创建java对象或集合
3) 使用jackson的ObjectMapper对象的writeValueAsString方法进行转换

5. 转换代码实现

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<script>
    //对象类型的json创建
    var jsonObj = {"name":"tom","age":18};
    console.log("获取对象类型的json数据:"+jsonObj.name)

    //数组类型的json创建
    var jsonArr = ["name","tom","age",18,true];
    for (var i = 0; i < jsonArr.length; i++) {
        console.log("Json数组中第"+(i+1)+"个值是:"+jsonArr[i])
    }

    var jsonMix = {"name":"Tom","age":18,"hobby":["唱","跳","Rap"]}
    console.log(jsonMix.name+jsonMix.age+jsonMix.hobby.toString())
</script>

</body>
</html>

六、JackSon

1、jackSon简介

Java中万事万物皆对象，Jackson库就是是一个基于Java语言的开源JSON格式解析工具。它的主要功能是提供JSON解析和生成，简单来说，Jackson就是用于将Java对象与JSON数据进行互相转换。

2、jack的jar包导入

3、代码演示

实体类

package com.jn.bean;

public class User {
    private String uid;
    private String uname;
    private String password;
    private int age;

    public User() {
    }

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid='" + uid + '\'' +
                ", uname='" + uname + '\'' +
                ", password='" + password + '\'' +
                ", age=" + age +
                '}';
    }
}

测试类

package com.jn.Test;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.jn.bean.User;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class UseJsonTool {
    public static void main(String[] args) throws JsonProcessingException {
        User user = new User();
        user.setUid("123456");
        user.setUname("陈奕迅");
        user.setPassword("888888");
        user.setAge(33);

        //创建list集合
        ArrayList<String> list = new ArrayList<>();
        list.add("周星驰");
        list.add("黄依圣");
        list.add("包租婆");

        //创建map集合
        Map  map = new HashMap<>();
        map.put("KongFu Name1:","九阳神功");
        map.put("KongFu Name2:","辟邪剑谱");
        map.put("KongFu Name3:","吸星大法");

        //转化为json数据
        ObjectMapper mapper = new ObjectMapper();
        String userJson = mapper.writeValueAsString(user);
        String listJson = mapper.writeValueAsString(list);
        String mapJson = mapper.writeValueAsString(map);

        System.out.println(userJson);
        System.out.println(listJson);
        System.out.println(mapJson);
    }
}

七、搜索框自动补全功能实现

实现步骤

1、实体类创建

package com.jn.bean;

public class Student {
    private int jid;
    private String jname;
    private int jage;
    private String jgongfu;
    private String jxingge;

    public Student() {
    }

    public int getJid() {
        return jid;
    }

    public void setJid(int jid) {
        this.jid = jid;
    }

    public String getJname() {
        return jname;
    }

    public void setJname(String jname) {
        this.jname = jname;
    }

    public int getJage() {
        return jage;
    }

    public void setJage(int jage) {
        this.jage = jage;
    }

    public String getJgongfu() {
        return jgongfu;
    }

    public void setJgongfu(String jgongfu) {
        this.jgongfu = jgongfu;
    }

    public String getJxingge() {
        return jxingge;
    }

    public void setJxingge(String jxingge) {
        this.jxingge = jxingge;
    }

    @Override
    public String toString() {
        return "Student{" +
                "jid=" + jid +
                ", jname='" + jname + '\'' +
                ", jage=" + jage +
                ", jgongfu='" + jgongfu + '\'' +
                ", jxingge='" + jxingge + '\'' +
                '}';
    }
}

2、查询数据库函数封装

package com.jn.dao;

import com.jn.utils.JDBCUtil;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

public class Dao<T> {
    private QueryRunner queryRunner=new QueryRunner();
    //通用增删改
    public int update(String sql,Object...objects) {
        Connection connection = JDBCUtil.getConnection();
        int update=0;
        try {
            update = queryRunner.update(connection, sql, objects);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtil.closeConn(connection);
        }
        return update;
    }
    //查询单条数据
    public T getBean(String sql,Class<T> cls,Object...objects) {
        Connection connection = JDBCUtil.getConnection();
        BeanHandler<T> bh=new BeanHandler<T>(cls);
        T t=null;
        try {
            t = queryRunner.query(connection, sql, bh, objects);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtil.closeConn(connection);
        }
        return t;
    }
    //查询多条数据
    public List<T> getBeanList(String sql, Class<T> cls, Object...objects) {
        Connection connection = JDBCUtil.getConnection();
        BeanListHandler<T> bh=new BeanListHandler<T>(cls);
        List<T> list=null;
        try {
            list = queryRunner.query(connection, sql, bh, objects);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtil.closeConn(connection);
        }
        return list;
    }
    //查询聚合数据
    public Object getScaleValue(String sql,Object...objects) {
        Connection connection = JDBCUtil.getConnection();
        ScalarHandler scalarHandler = new ScalarHandler();
        Object obj=null;
        try {
            obj = queryRunner.query(connection, sql, scalarHandler, objects);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            JDBCUtil.closeConn(connection);
        }
        return obj;
    }
}

package com.jn.dao;



import com.jn.bean.Student;
import org.junit.Test;

import java.util.List;

public class StudentDao {
    Dao dao = new Dao();

    public List<Student> searchWord(String word) {
        String sql = "select * from student where jname like ?";
        List<Student> beanList = dao.getBeanList(sql, Student.class, "%" + word + "%");
        return beanList;
    }
/*
    @Test
    public void addMethod(){
        String sql="select * from student";
        List<Student> list = dao.getBeanList(sql, Student.class,null);
        for (Student student : list) {
            System.out.println(student);
        }
    }
 */



}

3、数据库添加数据

4、查询数据库函数验证

package com.jn.service;

import com.jn.bean.Student;
import com.jn.dao.StudentDao;

import java.util.List;

public class SearchService {
    public List<Student> searchWord(String word) {
        StudentDao sd = new StudentDao();
        return sd.searchWord(word);
    }
}

5、数据库连接工具

package com.jn.utils;

import com.mchange.v2.c3p0.ComboPooledDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.SQLException;

public class JDBCUtil {

	private static DataSource dataSource=null;
	static{
		dataSource=new ComboPooledDataSource("mysql");
	}

	/**
	 * 获取数据库连接
	 * @return
	 */
	public static Connection getConnection(){
		Connection conn=null;
		try {
			conn=dataSource.getConnection();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return conn;
	}


	/**
	 * 关闭数据库连接
	 * @param conn
	 */
	public static void closeConn(Connection conn){
		try {
			if(conn!=null && conn.isClosed()){
				conn.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

6、Jsp页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: inline-block;
        }

        #search {
            width: 545px;
            height: 42px;
            border-color: #4E6EF2;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            float: left;
        }

        #btn {
            width: 108px;
            height: 42px;
            background-color: #4e6ef2;
            color: #fff;
            border: none;
            font-size: 17px;
            font-weight: 400;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            float: left;
        }

        #show {
            width: 545px;
            border: 1px solid #4e6ef2;
            position: relative;
            left: -55px;
            text-align: left;
        }
    </style>
    <script src="./js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //绑定键盘弹起事件
            $("#search").bind('input porpertychange',function(){
                //获取输入框的值
                var word = $(this).val();
                //判断不为空
                if(word != ""){
                    console.log(word)
                    //发送ajax请求
                    $.ajax({
                        url:"searchWord",
                        data:{"word":word},
                        type:"post",
                        dataType:"json",
                        success:function(obj){
                            var htmlStr = "";
                            for(var i = 0; i < obj.length; i++){
                                console.log(obj[i].jname)
                                htmlStr += "<div>"+obj[i].jname+"</div>";
                            }
                            $("#show").html(htmlStr).show();
                        }
                    })
                }else{
                    $("#show").hide();
                }
            })
        })
    </script>
</head>
<body>
<center>
    <img alt="" width="310" height="150" src="${pageContext.request.contextPath }/img/baidu.png"><br/>
    <div id="box">
        <input id="search" type="text" name="search"/>
        <button id="btn">百度一下</button>
    </div>
    <div id="show">

    </div>
</center>
</body>
</html>

7、Servlet控制层实现

package com.jn.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.jn.bean.Student;
import com.jn.service.SearchService;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.util.List;

@WebServlet("/searchWord")
public class SearchServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //解决中文乱码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        //获取关键字
        String word = req.getParameter("word");
        //业务处理(查询数据库)
        SearchService ss = new SearchService();
        List<Student> sList = ss.searchWord(word);
        //System.out.println(sList);
        //将list集合转发为json集合
        if (sList !=null && sList.size()>0){
            ObjectMapper mapper = new ObjectMapper();
            String sListJson = mapper.writeValueAsString(sList);
            System.out.println(sListJson);
            //响应给页面
            resp.getWriter().print(sListJson);
        }

    }
}

效果演示