一、重点思想

前后端分离项目的核心逻辑，说到底就是前后端数据怎么传、怎么收。理解了这一点，学习收参和传参的方式就变得格外重要。另外，数据在前后端之间是以JSON字符串的形式传递的，所以JSON字符串的转换与解析也是必须掌握的基础。

1、从前端向后端传递数据

1. 将前端数据封装成一个对象

2. 将对象转化为JSON字符串

3. 后端获取对象或属性

4. 解析为Ja va对象

2、从后端向前端传递数据

1. 将Ja va对象转化为JSON字符串：String s = JSON.toJSONString(student);
2. 实例化一个PrintWriter对象，调用write方法向前端传递：PrintWriter writer = res.getWriter();
3. 前端接收到后端的数据：let data = xmlHttpRequest.responseText;
4. 将JSON字符串解析为JS对象：let parse = JSON.parse(data);（拿到的是一个数组或者一个对象）

二、使用Ajax发起请求的方式

这部分主要是梳理一下代码，方便以后回顾。

1、使用GET方式向前端请求数据

            
Ajax测试开始啦！
  仅更换内容，不刷新页面
更换
版权信息

小羊碎碎念：

1. xmlHttpRequest.open("get","/ja vawebstudy2025_war_exploded/ajax1",true)，该方法的三个参数分别是：请求方法类型，url，异步请求。异步请求不写默认为true。
2. 异步请求：

@WebServlet("/ajax1")public class TestAjax1 extends HttpServlet {    @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 {        req.setCharacterEncoding("utf-8");        resp.setContentType("text/html;charset=utf-8");        PrintWriter writer = resp.getWriter();        writer.write("我是来自后端的数据！");//后端向前端传递的数据    }}

小羊碎碎念：

1. WebServlet 注解：用于注册 Servlet，将 Servlet 类与 Web 容器（如 Tomcat）建立关联，让容器能够识别、加载并正确调用 Servlet 处理 HTTP 请求。
2. 创建 Servlet 类的常见方式：继承HttpServlet类（重写doGet、doPost方法或者直接实现service方法也可以）；继承GenericServlet类（重写service方法）；实现Servlet接口（实现所有抽象方法）。
3. 实现一个接口必须实现他的抽象方法，否则定义该类为抽象类。

2、使用Get请求从前端向后端传递数据

            
    用户名和密码是什么？
用户名：密码：提交

@WebServlet("/ajax2")public class TestAjax2 extends HttpServlet {    @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 {        req.setCharacterEncoding("utf-8");        resp.setContentType("text/html;charset=utf-8");        PrintWriter writer = resp.getWriter();        String name = req.getParameter("name");        String password = req.getParameter("password");        writer.write("用户名是"+name+",密码是"+password+"!");    }}

三、主要思想代码示例

首先，要明确是从前端向后端传数据还是从后端向前端传数据。第二，数据在前后端之间以JSON字符串的形式进行传递，那就涉及到JSON字符串的转换与解析。

1、获取DOM对象、定义全局变量、初始化

let tabObj = document.getElementById("tab")let sname = document.getElementById("sname");let ssex = document.getElementById("ssex");let sage = document.getElementById("sage");let user = document.getElementById("user");let pwd = document.getElementById("pwd");let jsonData;let indexc;let id;window.onload = function () {    ajaxGetData();}function ajaxGetData() {    let xmlHttpRequest = new XMLHttpRequest();    xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=selectDo", true);    xmlHttpRequest.onreadystatechange = function () {        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {            let data = xmlHttpRequest.responseText;            jsonData = JSON.parse(data);            let maxIndex = jsonData[jsonData.length - 1].id + 1;            initData("tab");        }    }    xmlHttpRequest.send();}

2、从前端向后端传数据

（1）校验管理员

/** * 6、校验管理员 * 关于传参选择普通键值对还是JSON字符串： * 简单数据用普通键值对，直观简洁，在URL拼接或传统表单提交时很方便，后端解析也容易。 * 而像实体类这种包含多个属性、结构较复杂的数据，JSON字符串能更好呈现其完整结构，方便前后端处理和交互。 * 这里测试过了，两种方法都是可以的。 */function isAdmin() {    let xmlHttpRequest = new XMLHttpRequest();    let newData={        "admin":user.value,        "password":pwd.value    }    let s = encodeURIComponent(JSON.stringify(newData));    xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=isAdminDo&Data="+s, true);    /*let admin=user.value    let password=pwd.value    xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=isAdminDo&admin="+admin+"&password="+password, true);*/    xmlHttpRequest.onreadystatechange = function () {        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {            let data = xmlHttpRequest.responseText;            let parse = JSON.parse(data);            if(parse.msg=="success"){                //前端中==就可以比较两个字符串，而Ja va中需要用equals比较两个对象是否相等，==比较两个对象是否是同一个对象                window.location.href="showList copy 2.html" rel="external nofollow"             }else{                alert("用户名或密码错误，请重试")            }        }    }    xmlHttpRequest.send();}

    /**     * 逻辑2：登录     * @param servletRequest     * @param servletResponse     * @throws ServletException     * @throws IOException     */    public void isAdminDo(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {        String data = servletRequest.getParameter("Data");        JSONObject jsonObject = JSONObject.parseObject(data);        String admin = jsonObject.getString("admin");        String password = jsonObject.getString("password");       /* String admin = servletRequest.getParameter("admin");        String password = servletRequest.getParameter("password");*/        StudentImplService studentImplService = new StudentImplService();        Boolean login = studentImplService.isAdminService(admin, password);        PrintWriter writer = servletResponse.getWriter();        if(login!=null){            writer.write(JSON.toJSONString(Result.success()));        }else{            writer.write(JSON.toJSONString(Result.error("登录失败")));        }    }

（2）添加

/** * 2、添加数据 * @returns */function addData() {    var maxIndex = jsonData[jsonData.length - 1].id + 1    if (sname.value == "" || ssex.value == "" || sage.value == "") {        alert("数据不完整")        return false;    }    let newData = {        "id": maxIndex,        "sname": sname.value,        "ssex": ssex.value,        "sage": sage.value,    }    let jsonStr = encodeURIComponent(JSON.stringify(newData));    let xmlHttpRequest = new XMLHttpRequest();    xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=addDo&jsondata=" + jsonStr, true);    xmlHttpRequest.onreadystatechange = function () {        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {            let data = xmlHttpRequest.responseText;            ajaxGetData();        }    }    xmlHttpRequest.send();}

    /**     * 逻辑4：添加     * @param servletRequest     * @param servletResponse     * @throws ServletException     * @throws IOException     */    public void addDo(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {        HttpServletRequest req1 = (HttpServletRequest) servletRequest;        HttpSession session = req1.getSession(false);        PrintWriter writer = servletResponse.getWriter();        String newStu = servletRequest.getParameter("jsondata");        JSONObject jsonObject = JSONObject.parseObject(newStu);        String sname = jsonObject.getString("sname");        String ssex = jsonObject.getString("ssex");        String sage = jsonObject.getString("sage");        Student student = new Student(null, sname, ssex, sage);        int add = studentImplService.insertService(student);        if (add > 0) {            HttpServletResponse servletResponse1 = (HttpServletResponse) servletResponse;        } else {            System.out.println("添加失败！");        }    }

（3）实现更新

/** * 5、更新数据:将表格里的新数据又赋给json对象各属性的值 * 这个不用闭包 */function updateData1() {    let xmlHttpRequest = new XMLHttpRequest();    let newData = {        "id": id,//这里我就使用的是全局变量，以后每次先点击更新按钮，id就会被重新赋值为当前学号        "sname": sname.value,        "ssex": ssex.value,        "sage": sage.value,    }    let s = encodeURIComponent(JSON.stringify(newData));    xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=updateDo&newStu=" + s, true);    xmlHttpRequest.onreadystatechange = function () {        if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {            ajaxGetData();        }    }    xmlHttpRequest.send();}

    /**     * 逻辑6：真正实现更新     * @param req     * @param res     * @throws ServletException     * @throws IOException     */    public void updateDo(ServletRequest req, ServletResponse res) throws ServletException, IOException {        String newStu = req.getParameter("newStu");        JSONObject jsonObject = JSONObject.parseObject(newStu);        Integer id = jsonObject.getInteger("id");        String sname = jsonObject.getString("sname");        String ssex = jsonObject.getString("ssex");        String sage = jsonObject.getString("sage");        Student student = new Student(id, sname, ssex, sage);        int update = studentImplService.updateService(student);        if (update < 0) {            System.out.println("更新失败！");        }    }

3、从后端向前端传数据

（1）查询数据

/** * 1、渲染json数据，并且动态生成表格 */function initData(tab) {    // 清理原来的DOM结构（不清理表头）    tabObj.innerHTML = "";    for (let index = 0; index < jsonData.length; index++) {        var trObj = document.createElement("tr")        if (index % 2 == 0) {            trObj.style.backgroundColor = "lightblue"//偶数行是蓝色        }        for (let pos = 0; pos < Object.keys(jsonData[0]).length + 2; pos++) {            var tdObj = document.createElement("td")            trObj.appendChild(tdObj)        }        let tdObjChildren = trObj.children;        let m = 0;        Object.keys(jsonData[index]).forEach(key => {                tdObjChildren[m++].innerHTML = jsonData[index][key];            }        )        let btnObj = document.createElement("button")        btnObj.innerHTML = "删除";        btnObj.onclick = delDate(index);        tdObjChildren[Object.keys(jsonData[0]).length].appendChild(btnObj)        let btnObj1 = document.createElement("button")        btnObj1.innerHTML = "更新";        btnObj1.onclick = updateData(jsonData[index].id)        tdObjChildren[Object.keys(jsonData[0]).length + 1].appendChild(btnObj1)        tabObj.appendChild(trObj)    }}

    /**     * 逻辑1：渲染数据     * @param req     * @param resp     * @throws ServletException     * @throws IOException     */    public void selectDo(ServletRequest req, ServletResponse resp) throws ServletException, IOException {        HttpServletRequest req1 = (HttpServletRequest) req;        HttpSession session = req1.getSession(false);        HttpServletResponse resp1 = (HttpServletResponse) resp;        List allData = studentImplService.getAllService();        String s = JSON.toJSONString(allData);        PrintWriter writer = resp.getWriter();        writer.write(s);    }

（2）获取一条数据

/** * 4、更新数据:将json数据放在表格里 */function updateData(index) {    let index1 = index//闭包函数写法    return function () {        indexc = index1;//全局的indexc记录了要修改的数据的下标        let xmlHttpRequest = new XMLHttpRequest();        xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=getOneDo&id=" + indexc, true);        xmlHttpRequest.onreadystatechange = function () {            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {                let data = xmlHttpRequest.responseText;                let parse = JSON.parse(data);                id = parse.id;//我将这里的id设置为全局变量，为了在真正实现更新时给“id”值                sname.value = parse.name//注意，这里返回了一条从数据库里面查出来的数据，你通过.属性名时这里的属性名是表中字段名                ssex.value = parse.sex                sage.value = parse.age                ajaxGetData();            }        }        xmlHttpRequest.send();    }}

    /**     * 逻辑5：获取一条数据:服务器端渲染     * @param req     * @param res     * @throws ServletException     * @throws IOException     */    public void getOneDo(ServletRequest req, ServletResponse res) throws ServletException, IOException {        Integer id = Integer.valueOf(req.getParameter("id"));        Student student = studentImplService.getOneService(id);        String s = JSON.toJSONString(student);        PrintWriter writer = res.getWriter();        writer.write(s);    }

（3）删除一条数据

/** * 3、删除数据 * @param {*} index * @returns *///也可以在调用处传参jsonData[index].id，然后让他等于index1，在地址里面传参index1即可function delDate(index) {    let index1 = index;    return function () {        if (confirm("确认删除吗？")) {            let xmlHttpRequest = new XMLHttpRequest();            xmlHttpRequest.open("get", "/ja vawebstudy2025_war_exploded/Do?method=delDo&id=" + jsonData[index1].id, true);            xmlHttpRequest.onreadystatechange = function () {                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {                    ajaxGetData();                }            }            xmlHttpRequest.send();        }    }}

    /**     * 逻辑3：删除     * @param req     * @param res     * @throws ServletException     * @throws IOException     */    public void delDo(ServletRequest req, ServletResponse res) throws ServletException, IOException {        String id = req.getParameter("id");        System.out.println("id = " + id);        Integer idd = Integer.valueOf(id);        int i = studentImplService.delService(idd);        System.out.println("i = " + i);        if (i > 0) {            HttpServletResponse servletResponse1 = (HttpServletResponse) res;        } else {            System.out.println("删除失败！");        }    }

4、数据访问层展示

这个项目实现了数据的增删查改与校验管理员，分别写了两个实体类：学生类和管理员类，并为它们分别写了数据访问层。如果没有管理员类，通过MyBatis操作数据库会失败，所以定义管理员类是必要的。

package dao;import moudle.Student;import org.apache.ibatis.annotations.*;import ja va.util.List;public interface StudentDao {    @Select("select * from Student")    List getAllDao();    @Delete("delete from student where id=#{id}")    int delDao(Integer id);    @Insert("insert into student values (null,#{name},#{sex},#{age})")    int insertDao(Student student);    @Select("select * from student where id=#{id}")    Student getOneDao(Integer id);    @Update("update student set name=#{name},sex=#{sex},age=#{age} where id=#{id}")    int updateDao(Student student);    @Select("select * from student limit #{start},#{pageSize}")    List fenYeDao(@Param("start") Integer start,@Param("pageSize") Integer pageSize);}

package dao;import org.apache.ibatis.annotations.Param;import org.apache.ibatis.annotations.Select;public interface ManagerDao {    @Select("select * from manager where admin=#{admin} and password=#{password}")    Boolean isAdminDao(@Param("admin") String admin,@Param("password") String password);}

5、分页查询前端代码备份

这是一个JSP文件

<%@ page import="moudle.Student" %><%@ page import="ja va.util.List" %><%@ page import="service.impl.StudentImplService" %><%--  Created by IntelliJ IDEA.  User: 34806  Date: 2025/5/7  Time: 10:15  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="ja va" %>                            <%    StudentImplService studentImplService1 = new StudentImplService();    List data = studentImplService1.getAllService();    int totalCount = data.size();    int pageSize = 3;    int pageCount = (int) (Math.ceil(totalCount * 1.0 / pageSize));    int curPage = request.getParameter("curPage") == null ?            1 : Integer.valueOf(request.getParameter("curPage"));    int offSet = (curPage - 1) * 3;    StudentImplService studentImplService = new StudentImplService();    List students = studentImplService.fenYeService(offSet, pageSize);%>退出    <%        for (int i = 0; i < students.size(); i++) {    %>        <%        }    %>    <%        if (curPage == 1) {    %>        <%    } else if (curPage == pageCount) {    %>        <%    } else {    %>        <%        }    %>    
    
    
        
学号
        
姓名
        
性别
        
年龄
        
操作1
        
操作2
    
    
    
        
<%=students.get(i).getId()%>
        
<%=students.get(i).getName()%>
        
<%=students.get(i).getSex()%>
        
<%=students.get(i).getAge()%>
        
删除
        
更新
    
        
首页
        
上一页
        
下一页
        
尾页
    
        
首页
        
上一页
        
下一页
        
尾页
    
        
首页
        
上一页
        
下一页
        
尾页
    
    添加