SSM:json数据,使用AJAX发送post请求和RequestBody接收参数,报错415及405的分析和解决

4 篇文章 0 订阅

POST http://localhost:8080/blog/submitForm 415 (Unsupported Media Type)

POST http://localhost:8080/blog/submitForm 400 (Bad Request)

需求:将一个json字符串传给后台,使用ajax,结果实现的时候,前端先是415,后是400报错。把整个过程错误及解决的方法记录下来,供大家参考。

下图是我最开始的ajax代码及后台controller层接收方法的代码

    $(".layui-btn").click(function () {
        var params = {"title":$("#title").val(),"selectCategory":$("#selectCategory").val(),"content":$("#editor_container").val()}]
        $.ajax({
            type: "post",
            url: "/blog/submitForm",
            data: params,
            dataType: "json",
            success: function(result){
            }
        });
    })
   @RequestMapping(value = "/submitForm", method = RequestMethod.POST)
    @ResponseBody
    public String submitForm(@RequestBody JSONObject data){
        System.out.println("进入到submitForm");
        System.out.println(data.get("title"));
        System.out.println(data.get("content"));
        return "";
    }

运行时415报错:

POST http://localhost:8080/blog/submitForm 415 (Unsupported Media Type)

原因:缺少contentType:'application/json'

这是因为后台是以json对象接收参数,所以你在ajax请求这里要设置好。

这行代码是用来告诉服务器,应该用怎样的方式去处理请求主体。相当于是,你将请求主体中的数据发送出去之后,你还必须告诉服务器,我发送的数据是什么类型的,这样服务器才能正确解析请求主体的内容(如果没有content-type或者content-type的设置是错的,都会导致浏览器无法正确解析请求主体,也就无法对数据做出正确响应了。

加上上面暖说说代码后,运行报错提示400:

POST http://localhost:8080/blog/submitForm 400 (Bad Request)

原因:缺少data: JSON.stringify(params),

我现在的代码传输的并不是json类型,而在我的后台接收,是接收json对象,所以需要对params进行json化。

最终正确的代码如下

 var params = {"title":$("#title").val(),"selectCategory":$("#selectCategory").val(),"content":$("#editor_container").val()}
        $.ajax({
            type: "post",
            url: "/blog/submitForm",
            data: JSON.stringify(params),
            dataType: "json",
            contentType:'application/json',
            success: function(result){
            }

总结:不管是415还是400报错,都是“客户端发送的请求在语法上不正确。”即

所以使用ajax请求,多注意你的请求头设置。

引用:https://www.jianshu.com/p/3716212666d6

https://www.cnblogs.com/yeyuchangfeng/p/5623445.html

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Ajax实现SSM整合增删改查可以按照以下步骤进行操作: 1. 在前端页面中引入jQuery库,确保能够使用jQuery的Ajax方法。 2. 创建前端页面,包括相应的表单和按钮,用于用户输入数据和触发相应的操作。 3. 在后端创建相应的Controller类,用于处理前端请求,并调用后端的Service层进行数据操作。 4. 在Controller类中定义相应的方法,用于处理前端请求,并返回相应的结果。 5. 在Service层中定义相应的接口和实现类,用于处理后端数据操作。 6. 在Mapper层中定义相应的SQL语句,用于操作数据库。 7. 在前端页面中编写相应的JavaScript代码,使用Ajax方法向后端发送请求,并处理返回的结果。 下面是一个简单的示例代码: 在前端页面中的JavaScript代码: ```javascript // 添加数据 function addData() { var data = { name: $("#name").val(), age: $("#age").val(), // 其他字段... }; $.ajax({ type: "POST", url: "/addData", data: JSON.stringify(data), contentType: "application/json", success: function(result) { // 处理成功返回的结果 }, error: function(error) { // 处理错误信息 } }); } // 删除数据 function deleteData(id) { $.ajax({ type: "POST", url: "/deleteData", data: {id: id}, success: function(result) { // 处理成功返回的结果 }, error: function(error) { // 处理错误信息 } }); } // 修改数据 function updateData(id) { var data = { id: id, name: $("#name").val(), age: $("#age").val(), // 其他字段... }; $.ajax({ type: "POST", url: "/updateData", data: JSON.stringify(data), contentType: "application/json", success: function(result) { // 处理成功返回的结果 }, error: function(error) { // 处理错误信息 } }); } // 查询数据 function queryData(id) { $.ajax({ type: "GET", url: "/queryData", data: {id: id}, success: function(result) { // 处理成功返回的结果 }, error: function(error) { // 处理错误信息 } }); } ``` 在后端Controller类中的方法: ```java @Controller public class DataController { @Autowired private DataService dataService; @RequestMapping(value = "/addData", method = RequestMethod.POST) @ResponseBody public String addData(@RequestBody Data data) { // 处理添加数据的逻辑 dataService.addData(data); return "success"; } @RequestMapping(value = "/deleteData", method = RequestMethod.POST) @ResponseBody public String deleteData(@RequestParam("id") Integer id) { // 处理删除数据的逻辑 dataService.deleteData(id); return "success"; } @RequestMapping(value = "/updateData", method = RequestMethod.POST) @ResponseBody public String updateData(@RequestBody Data data) { // 处理修改数据的逻辑 dataService.updateData(data); return "success"; } @RequestMapping(value = "/queryData", method = RequestMethod.GET) @ResponseBody public Data queryData(@RequestParam("id") Integer id) { // 处理查询数据的逻辑 return dataService.queryData(id); } } ``` 这样就可以通过Ajax实现SSM整合增删改查了。根据实际需求,可以在前端页面中调用相应的函数,实现相应的功能。在后端Controller类中处理前端请求,并调用Service层进行数据操作,在Service层中处理具体的业务逻辑,并调用Mapper层进行数据库操作。最后,通过Ajax方法向后端发送请求,并处理返回的结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值