使用Ajax从前端向后端发起请求的做法示例实用指南

佚名 2026-09-07 08:30:01

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“采用Ajax从前端向后端发起请求的做法示例”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

一、重点思想

重点思想看过来哇！！！

从实现思路看，我个人认为做前后端分离的项目，无非就是前后端数据的相互传递，那么以这个思想为基础，学习收参和传参的方式就显得格外重要；
实际处理时，另外，我们是以JSON字符串的形式传递数据的，还需学习JSON字符串的转换与解析！

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

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

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

3.后端拿到对象或属性：

4.解析为Java对象：

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

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

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

这一部分可看可不看，我主要是自己梳理一下代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function ajax1(){
            //以下是AJAX请求流程
            let xmlHttpRequest = new XMLHttpRequest();//1.创建XMLHttpRequest对象
            xmlHttpRequest.open("get","/javawebstudy2025_war_exploded/ajax1",true)//2.初始化请求，添加请求参数

            xmlHttpRequest.onreadystatechange=function(){//3.设置状态回调
                if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                    let data = xmlHttpRequest.responseText;
                    console.log(data);
                    document.querySelector("#res").innerHTML=data;
                }
            }
            xmlHttpRequest.send();//4.发送请求
        }
    </script>
</head>
<body>
<h1>Ajax测试开始啦！</h1>
<p id="res" >
  仅更换内容，不刷新页面
</p>
<button onclick="ajax1()">更换</button>
<h2>版权信息</h2>
</body>
</html>

小羊碎碎念：

实际处理时，xmlHttpRequest.open(“get”,“/javawebstudy2025_war_exploded/ajax1”,true)，该方法的三个参数分别是：请求方法类型，url，异步请求。（异步请求不写默认为true）
异步请求：

@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("我是来自后端的数据！");//后端向前端传递的数据
    }
}

小羊碎碎念：

结合项目来看，WebServlet 注解：用来注册 Servlet，将 Servlet 类与 Web 容器（如 Tomcat）建立关联，让容器能够识别、加载同时正确调用 Servlet 处理 HTTP 请求。
新建 Servlet 类的常用方式：
在这个场景下，继承HttpServlet类（重写doGet、doPost方法或者直接实现service方法也能够）；
继承GenerricServlet类（重写service方法）；
实现Servlet接口（实现所有抽象方法）。
实现一个接口必须实现他的抽象方法，否则定义该类为抽象类。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function ajax2(){
            let xmlHttpRequest = new XMLHttpRequest();
            //获取DOM对象，再获取它的值
            let user = document.querySelector(".user").value;
            let pwd = document.querySelector(".pwd").value;
            xmlHttpRequest.open('get','/javawebstudy2025_war_exploded/ajax2?name='+user+'&password='+pwd);
            // 异步请求不写默认是true
            xmlHttpRequest.onreadystatechange=function(){
                if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                    let data = xmlHttpRequest.responseText;
                    document.querySelector(".res").innerHTML=data;
                }
            }
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<p class="res" >
    用户名和密码是什么？
</p>
用户名：<input type="text" class="user">

密码：<input type="text" class="pwd">

<button onclick="ajax2()">提交</button>
</body>
</html>

@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", "/javawebstudy2025_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", "/javawebstudy2025_war_exploded/Do?method=isAdminDo&Data="+s, true);
    /*let admin=user.value
    let password=pwd.value
    xmlHttpRequest.open("get", "/javawebstudy2025_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"){
                //前端中==就可以比较两个字符串，而Java中需要用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);
//        System.out.println("login = " + login);
        PrintWriter writer = servletResponse.getWriter();

        if(login!=null){
//            HttpServletResponse servletResponse1 = (HttpServletResponse) servletResponse;
//            servletResponse1.sendRedirect("showList copy 2.html");
          //  Result result = new Result(1,"success",null);
            writer.write(JSON.toJSONString(Result.success()));
        }else{
            //return Result.error("登陆失败");
          writer.write(JSON.toJSONString(Result.error("登录失败")));
//            writer.write(333);
        }

    }

（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 jsonStr = JSON.stringify(newData);
    // alert(jsonStr)
    let xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.open("get", "/javawebstudy2025_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);

        /*这里收参方式有问题，在前面已经通过getParameter获取到了jsondata，后面在取键时应该.属性名
        String sname = servletRequest.getParameter("sname");
        String ssex = servletRequest.getParameter("ssex");
        String sage = servletRequest.getParameter("sage");*/

        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) {
//            servletRequest.getRequestDispatcher("Do?method=selectDo").forward(servletRequest, servletResponse);

            HttpServletResponse servletResponse1 = (HttpServletResponse) servletResponse;
//            servletResponse1.sendRedirect("Do?method=selectDo");
        } 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", "/javawebstudy2025_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[4].appendChild(btnObj)
        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<Student> allData = studentImplService.getAllService();
        String s = JSON.toJSONString(allData);
        PrintWriter writer = resp.getWriter();
        writer.write(s);
        //   req1.setAttribute("data", allData);
//        req1.getRequestDispatcher("ShowList1.jsp").forward(req1, resp1);

    }

（2）拿到一条数据

/**
 * 4、更新数据:将json数据放在表格里
 */
function updateData(index) {
    let index1 = index//闭包函数写法
    return function () {
        indexc = index1;//全局的indexc记录了要修改的数据的下标
        let xmlHttpRequest = new XMLHttpRequest();
        xmlHttpRequest.open("get", "/javawebstudy2025_war_exploded/Do?method=getOneDo&id=" + indexc, true);
        xmlHttpRequest.onreadystatechange = function () {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                let data = xmlHttpRequest.responseText;
               /* if(data.code==200 && data.msg=="success")
                {

                }*/
                let parse = JSON.parse(data);
                id = parse.id;//我将这里的id设置为全局变量，为了在真正实现更新时给“id”值
                // console.log(id);
                sname.value = parse.name//注意，这里返回了一条从数据库里面查出来的数据，你通过.属性名时这里的属性名是表中字段名
                ssex.value = parse.sex
                sage.value = parse.age
                // console.log(parse);
                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", "/javawebstudy2025_war_exploded/Do?method=delDo&id=" + jsonData[index1].id, true);
            xmlHttpRequest.onreadystatechange = function () {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    // let data = xmlHttpRequest.responseText;
                    ajaxGetData();
                }
            }
            xmlHttpRequest.send();
        }
    }
}

    /**
     * 逻辑3；删除
     *
     * @param req
     * @param res
     * @throws ServletException
     * @throws IOException
     */
    public void delDo(ServletRequest req, ServletResponse res) throws ServletException, IOException {
//        获取删除的那条记录的主键ID
        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) {
//            req.getRequestDispatcher("/Do?method=selectDo").forward(req, res);
            HttpServletResponse servletResponse1 = (HttpServletResponse) res;
//            servletResponse1.sendRedirect("Do?method=selectDo");
        } else {
            System.out.println("删除失败！");
        }
    }

4、数据访问层展示

理解这一步时，我的这个项目实现了数据的增删查改与校验管理员（借助vscode中我那个纯前端的项目改造的），分别写了两个实体类：学生类和管理员类，我也为他们分别写了数据访层。我记得当时没有写管理员类，随后借助mybatis操作数据库失败了，所以定义管理员类是必要的。

package dao;
import moudle.Student;
import org.apache.ibatis.annotations.*;
import java.util.List;

public interface StudentDao {
//    渲染数据
    @Select("select * from Student")
    List<Student> 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<Student> 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="java.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="java" %>
<html>
<head>
    <title>学生信息列表展示</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow" >
    <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<%
    //    List<Student> data = (List<Student>) request.getAttribute("data");
    /**
     *     作用域问题：在 JSP 中，
     *     request.getAttribute("data") 获取数据，
     *     request 作用域仅在一次请求 - 响应过程中有效。
     *     点击下一页是新请求，之前 request 作用域里的数据不会自动带到新请求中。
     *     若没有重新设置 data 到新 request 作用域，就获取不到。
     */
    StudentImplService studentImplService1 = new StudentImplService();
    List<Student> data = studentImplService1.getAllService();

//    1.计算有多少条数据
    int totalCount = data.size();
//    2.设置每一页有几条数据
    int pageSize = 3;
//    3.计算有多少页
    int pageCount = (int) (Math.ceil(totalCount * 1.0 / pageSize));
//    4.获取当前页
    int curPage = request.getParameter("curPage") == null ?
            1 : Integer.valueOf(request.getParameter("curPage"));
//    计算偏移值
    int offSet = (curPage - 1) * 3;
//    5.获取当前页的数据
    StudentImplService studentImplService = new StudentImplService();
    List<Student> students = studentImplService.fenYeService(offSet, pageSize);
%>
<%--你依然保持在线！--%>
<a href='/javawebstudy2025_war_exploded/logout'>退出</a>
<table class="table">
    <thead class="thead-dark">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作1</th>
        <th>操作2</th>
    </tr>
    </thead>
    <tbody>
    <%
        for (int i = 0; i < students.size(); i++) {
    %>
    <tr>
        <td>
            <%=students.get(i).getId()%>
        </td>
        <td>
            <%=students.get(i).getName()%>
        </td>
        <td>
            <%=students.get(i).getSex()%>
        </td>
        <td>
            <%=students.get(i).getAge()%>
        </td>
        <td>
            <a href="/javawebstudy2025_war_exploded/Do?method=delDo&id=<%=students.get(i).getId()%>" rel="external nofollow" 
               onclick="if(confirm('确认删除吗？')) return true;return false;">删除</a>
        </td>
        <td>
            <a href="/javawebstudy2025_war_exploded/Do?method=getOneDo&id=<%=students.get(i).getId()%>" rel="external nofollow" >更新</a>
        </td>
    </tr>
    <%
        }

    %>
    <%
        if (curPage == 1) {

    %>
    <tr>
        <td>首页</td>
        <td>上一页</td>
        <td><a href="ShowList1.jsp?curPage=<%=curPage+1%>" rel="external nofollow"  rel="external nofollow" >下一页</a></td>
        <td><a href="ShowList1.jsp?curPage=<%=pageCount%>" rel="external nofollow"  rel="external nofollow" >尾页</a></td>
    </tr>
    <%
    } else if (curPage == pageCount) {
    %>
    <tr>
        <td><a href="ShowList1.jsp?curPage=1" rel="external nofollow"  rel="external nofollow" >首页</a></td>
        <td><a href="ShowList1.jsp?curPage=<%=curPage-1%>" rel="external nofollow"  rel="external nofollow" >上一页</a></td>
        <td>下一页</td>
        <td>尾页</td>
    </tr>
    <%
    } else {
    %>
    <tr>
        <td><a href="ShowList1.jsp?curPage=1" rel="external nofollow"  rel="external nofollow" >首页</a></td>
        <td><a href="ShowList1.jsp?curPage=<%=curPage-1%>" rel="external nofollow"  rel="external nofollow" >上一页</a></td>
        <td><a href="ShowList1.jsp?curPage=<%=curPage+1%>" rel="external nofollow"  rel="external nofollow" >下一页</a></td>
        <td><a href="ShowList1.jsp?curPage=<%=pageCount%>" rel="external nofollow"  rel="external nofollow" >尾页</a></td>
    </tr>
    <%
        }
    %>
    </tbody>
</table>

<button >
    <a href="/javawebstudy2025_war_exploded/add.html" rel="external nofollow" >添加</a>
</button>

</body>
</html>

总结

到此这篇关于采用Ajax从前端向后端发起请求的文章就介绍到这了,更多相关Ajax从前端向后端发起请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！

您可能感兴趣的文章:

ajax请求前端跨域问题原因及解决方案
前端终止请求的3种方式总结(ajax、axios)
前端ajax请求+后端java实现的下载zip压缩包功能示例
关于前端ajax请求的优雅方案（http客户端为axios）
前端请求全面解析之AJAX、Axios 与 Fetch的采用详解与示例代码

专题三国战纪-风云再起整合版
专题三国战纪-乱世枭雄

热门阅读

推荐下载

下载

|
下载
《行尸走肉第一章》免安装中文汉化硬盘版下载

单机|436 MB

一款以动作冒险为主题的游戏
下载
《街头霸王X铁拳》免安装中文汉化硬盘版下载

单机|111MB

一款非常好玩的格斗游戏
下载

|
下载
《暗黑破坏神3》免安装繁体中文正式版下载

单机|7630 MB

一款以角色扮演为主题的游戏
下载
《马克思佩恩3》免安装硬盘版下载

单机|27033 MB

一款以第三人称射击为主题的游戏

详情

导航

详情

使用Ajax从前端向后端发起请求的做法示例实用指南

目录

一、重点思想

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

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

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

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

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

三、主要思想示例代码

1、拿到DOM对象、定义全局变量、初始化

2、从前端向后端传数据

（1）校验管理员

（2）添加

（3）实现更新

3、从后端向前端传数据

（1）查询数据

（2）拿到一条数据

（3）删除一条数据

4、数据访问层展示

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

总结

SunoAI局部改词有字数限制吗

解决依赖冲突

快对AI拍照搜题夜间光线差识别失败怎么办

Qoder可以完成Spring_Boot项目重构吗

PavoAI手机端提示词输入限制怎么突破

DeepSeek本地部署模型加载失败怎么办

红色版泰山小说

单挑王

春暖学语文

惊悚躲猫猫

survivor royale手游版

Floating Dock

漂移拉力赛车最新版

皮卡灵动岛

wearfitpro表盘

地下城探险公会

安果相亲

TilesHop

零域社区

星际迷航：纷争

轻颖

苹果画质

猫咪博物馆

Go Birding

铁路运输大师

电车丸的连锁冒险

快搜阅读器

蒙缘APP

僵尸战场生存射击官方版

中羽联(羽毛球社交软件)