SpringBoot 使用ajax前后端交互

╰+哭是因爲堅強的太久メ 2022-02-22 19:40 527阅读 0赞

### 一.实现HTML页面跳转，跟springMVC类似 ###

1.pom.xml加入依赖

<dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

2.新建IndexController

@Controller
    public class IndexController {
    
        @RequestMapping("/index")
        public String  IndexHtml()
        {
            return "index";
        }
    }

> 注意，这里要使用@Controller,而不是@RestController，因为RestController是代表Controller+ResponseBody，会以json的形式返回，但这里只需返回字符串

3.在resource文件夹下，新建一个templates的文件夹，再新建一个index.html即可，无需配置文件

访问***localhost:8080/project\_name/index   *** 即可跳转到index.html页面

### 二.前端使用jquery-serializeJSON插件转换表单数据 ###

当前端使用form表单时，可以使用jquery-serializeJSON插件将form中的数据转换成json发送给后端。

需要引入jquery和jquery-serializeJSON.js

jquery-serializeJSON是基于jquery的一个插件，下载地址：https://github.com/marioizquierdo/jquery.serializeJSON

前端代码：

js代码：

$("#submit").click(function ()
    {
       var json=$("#formDemo").serializeJSON();
       var jsonString = JSON.stringify(json);;
       $.ajax({
             contentType: "application/json; charset=utf-8",
             type:"post",
             url:"additem",
             data:jsonString,
             success:function(data){
                  alert("success!!!");
             },
             error:function(e){
                   alert("error!!!");
             },
       }
       )
    });

serializeJSON方法是将form表单中的input元素的name属性和value属性组成key-value的形式

springboot后台代码：

1.先新建Item的pojo类：

public class Item {
       
        private String username;
    
        private String password;
    
        private String mail;
    
       
        getter and setter ....
    }

> 这个Item的属性名必须和form中的input的name属性一致

2.新建一个controller来接收url 代码：

使用@RequestBody 注解将json字符串转换成java对象Item

@RequestMapping("/additem")
    @ResponseBody
    
    public String AddItem(@RequestBody Item item)
    {
            return "success";
    }

点击提交按钮后报错：

Resolved \[org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported\]

这是因为后台@RequestBody转换json数据报错，需要ajax指定数据格式：

加入  contentType: "application/json; charset=utf-8",    即可

提交到后台，通过mybatis的 insertSelectiv插入数据库

1.后台已经获得Item的java对象，可以很轻松的调用mybatis自动生成的方法insert来插入数据库

但是插入的时候报错了：提示id字段为null

原因是数据库中的主键为id，但是没有传入id，所以报错，所以Item要加上id这个属性，并且前端也要加上name为id的input，可以选择将其隐藏.