SpringBoot+安全框架+前后端处理ajax请求

最新推荐文章于 2023-04-03 20:56:06 发布

ohsoa

最新推荐文章于 2023-04-03 20:56:06 发布

阅读量681

点赞数

文章标签： ajax spring boot javascript

本文链接：https://blog.csdn.net/ohsoa/article/details/127051298

版权

1、前端页面使用ajax技术发送json数据格式到后端控制器的格式

对应的触发点击事件的html按钮

1.1、前端：使用jquery操作dom绑定事件，并发送ajax请求到后端的格式，json格式为对象

部分代码：

//发送ajax请求到后端控制器，获取数据并写回到页面
$('.search').click(function () {
    //获取表单数值
    let id = $("#id").val();
    let warehousename = $("#warehousename").val();
    //初始化json字符串
    let myData={"id":id,"warehousename":warehousename}

    //完整ajax请求
    $.ajax({
        url:'/house/search',//后台接口地址
        type:'post',//请求方式，一般为get、post
        dataType:'json',//表示返回的数据必须为json，否则：会走下面error对应的方法。
        contentType:'application/json;charset=utf-8',//如果要发送json字符串，此属性不能少；否则，会出现后台会报异常
        data:JSON.stringify(myData),//将json对象转换为json字符串
        // async:false,关闭异步

        //请求成功后的回调方法
        success:function (data) {
            if (data.code===200){
                //先将html标签内的数据清空
                $('#data-list').empty()
                //获取到统一返回类型里面的数据
                let orders = data.data
                //遍历数据
                for (let o of orders) {
                    //往html标签里面放数据
                    $('#data-list').append('<tr><td>'+o.id+'</td><td>'+o.warehousename+'</td><td>'
                        +o.consignee+'</td><td>'+o.ename+'</td><td>'+o.outbounddate+'</td><td></td></tr>')
                }
            }else {
                alert("查询失败!")
            }
        },
        //请求失败后的回调方法
        error:function () {
            alert("查询失败！")
        }
    })
})

1.2、后端：接收前端ajax请求发送的json数据格式（单个对象），并返回给前端处理结果的代码

部分代码详情：

@RestController
@RequestMapping("/house")
public class WareHouseController {

    @Autowired private OutboundOrderService outboundOrderService;


    /**
     * 使用@RequestBody注解接收前端传递的json数据格式
     * 使用该注解需要注意，前端的json数据必须包含参数对象的所有属性，否则报错
     * @param outboundOrder
     * @return
     * @throws SQLException
     */
    @PostMapping("/search")
    public String selectOrders(@RequestBody OutboundOrder outboundOrder) throws SQLException {

        System.out.println("开始查询。。。");
        List<OutboundOrder> orders = outboundOrderService.selectOrdersByIdAndName(outboundOrder);

        //返回统一返回类型到后端ajax发起者
        if (orders.size()>=1){
            //注意返回值类型必须是字符串，因此我们需要把返回值转换为json格式的字符串
            //否则前端无法接收到数据也更无法调用成功/失败回调方法
            return JSON.toJSONString(ResultBean.success(orders));
        }else {
            return JSON.toJSONString(ResultBean.error(500,"查询失败!"));
        }
    }
}

2、如果前端ajax需要发送复杂类型的json数据，比如对象里面包含另一个对象或集合，格式该怎么写呢？

Ajax的其他部分格式基本一致，只需要注意data部分，也就是只需要关注json的格式

2.1、对象里面包含另一个对象的json格式写法

比如现在有一个教室类（属性 Integer floor，属性Student student）,学生类（属性String name）
那么这个教室的某个对象的json格式就是：

{“floor”:2, “student”:{“name”:“李世纪”}}

2.2、对象里面包含一个集合的json格式写法

比如现在有一个教室类（属性 Integer floor，属性List students）,学生类（属性String name）,假设位于二层的教室里面有三个学生
那么这个二层教室的json格式就是：
{“floor”:2, “students”:[{“name”:“李世纪”},{“name”:“李嘉歌”},{“name”:“李奕涵”}]}