AJAX前后端数据交互 SpringBoot框架

项目介绍：

在SpringBoot项目中使用AJAX进行前后端数据上的交互，例如：实现购买或删除一个列表中某一行数据：前端利用ajax向后端传递需要的信息，后端处理信息然后传回前端。读取用户输入的信息，然后传给后端，后端处理有传回处理结果。包含GET和Post

---

问题描述

解决的问题：

前端向后端传递参数，后端报错Required request parameter 'id' for method parameter type Integer is not present。

前端利用ajax向后端不能传入数据等

---

解决方案：

 先说get：get来说相对简单一点

功能实现：不切换页面实现查询效果

这个是前端查询的界面：

 <label>
     <td>请输入账户:</td>
     <input type="text" id="account">
     <button value="查询" onclick="chaxun()">查询</button>
</label>

 效果展示：

 这是JavaScript的ajax代码

<script type="text/javascript">
    function chaxun() {
        $.ajax({
            type: "get",
            url: "find",
            data: {'account': $("#account").val()},
            contentType: "text/application",
            success: function (data) {
                console.log(data);
                $("#div1").html(data);
            },
            error: function () {
                alert("账号不正确，请重新查询");
            },

        });
    }
</script>

方法是get，url是find，

$("#account").val()是取出用户输入的值。

$("#div1").html(data)是后端查到的数据放回前端展示的div模块(在这里div模块可以写一个隐藏，也可以重写一个页面)

这是后端代码：

@GetMapping("/find")
    public ModelAndView find(@NotNull @RequestParam("account")String account, HttpSession session){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("superzx");
        session.setAttribute("account",account);
        modelAndView.addObject(account);
                    
modelAndView.addObject("personaeList",this.personaeService.findd(Integer.valueOf(account)));
        return modelAndView;
    }

通过@ReqeustParam（“account”）取出从前端传入的参数，然后继续查询，通过modelandview放回数据。此间session可以忽略（用作其他用）其作用只是把数据在后端存起来，方便其他页面使用。

效果展示：

 后端代码可以加一个非空校验（我没有加）这样前端输入数据不正确就可以放回错误信息。

Post请求

功能实现，实现列表的购买删除功能，如图所示

前端代码：

这是前端数据展示的代码

                    <table>
                    <thead>
                    <tr>
                        <td width="10%">序号</td>
                        <td width="10%">名称</td>
                        <td width="10%">编号</td>
                        <td width="20%">产品金额</td>
                        <td width="20%">变动时间</td>
                        <td width="30%">实现操作</td>
                    </tr>
                    <tr th:each="product:${productList}">
                        <td th:text="${product.id1}"></td>
                        <td th:text="${product.pname}"></td>
                        <td th:text="${product.id}"></td>
                        <td th:text="${product.sellMoney}"></td>
                        <td th:text="${product.changeTime}"></td>
                        <td>
                            <button value="购买" onclick="buy(this)">购买</button>
                        </td>
                    </tr>
                    </thead>
                    </table>

 ajax代码： 

<script type="text/javascript">
    function buy(val) {
        let id = $(val).parent().parent().find("td").eq(2).text();
        let product = {"id":id}
        $.post({
            url: "buy",
            data:JSON.stringify(product),
            contentType:"application/json;charset=utf-8",
            success: function (data) {
                console.log(data);
                alert("买入成功");
            },
            error: function () {
                alert("买入失败，请检查余额是否充足");
            },
        });
    }
</script>

$(val).parent().parent().find("td").eq(2).text();的功能是拿出所点击行的第三列的数据，如上图就是拿出所点行编号一列的数据。注意：在ajax的按钮设计中一定要加上this，否则拿不到数据。数据封装成JSON格式传给后端。

let product = {"id":id}中可以封装多个参数，这里我只装入一个参数

后端代码：

     @PostMapping("/buy")
    @ResponseBody
    public void buy(@NotNull @RequestBody Product product）{
}

 因代码太多就不都展示了，只展示关键信息。

头部添加@ResponseBody ，参数前要用@RequestBody来拿去参数，Product是实体类，这是需要用实体类接收，不然就会报错参数不匹配问题。

结果：

 接下来说删除功能，因为和买入功能相似就不过多介绍，只用来多一个参考：

删除页面

 前端展现代码：

 <table>
        <thead>
        <tr>
            <td>序号</td>
            <td>账户</td>
            <td>产品名称</td>
            <td>编号</td>
            <td>产品金额</td>
            <td>变动时间</td>
            <td>持有金额</td>
        </tr>
        </thead>
        <tbody>
        <tr th:each="personad:${personadList}">
            <td th:text="${personad.id1}"></td>
            <td th:text="${personad.account}"></td>
            <td th:text="${personad.pname}"></td>
            <td th:text="${personad.id}"></td>
            <td th:text="${personad.sellMoney}"></td>
            <td th:text="${personad.changeTime}"></td>
            <td th:text="${personad.haveMoney}"></td>
            <td>
                <button value="删除" onclick="delete2(this)">卖出</button>
            </td>
        </tr>
        </tbody>
    </table>

 前端ajax代码

<script type="text/javascript">
    function delete2(val) {
        let id1 = $(val).parent().parent().find("td").eq(0).text();
        let sellMoney = $(val).parent().parent().find("td").eq(4).text();
        let personad = {"id1":id1,"sellMoney":sellMoney}
        $.post({
            url: "delete",
            data:JSON.stringify(personad),
            contentType:"application/json;charset=utf-8",
            success: function (data) {
                console.log(data);
                alert("卖出成功");
            },
            error: function () {
                alert("卖出失败");
            },
        });
    }
</script>

后端代码：

@PostMapping("/deleteA")
    @ResponseBody
    public void delete(@NotNull @RequestBody Product product) throws Exception {
        int id = product.getId();
        List<Personad> list =this.personadService.findById(id);
        if (list.size()==0){
            this.productService.delete(id);
        }else {
            throw new Exception();
        }
    }

结果：

 

 以上就是SpringBoot中ajax前后端数据交互的全部了，希望对您有用！