SpringBoot 使用ajax前后端交互

一.实现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

 <script src="js/jquery-3.3.1.js"></script>
 <script src="js/jquery.serializejson-2.9.0.js"></script>

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

 

前端代码：

<form id="formDemo">
<p>用户名:  <input  name="username" type="text"/> </p>
<p>密码:  <input  name="password" type="text"/> </p>
<p>邮箱:  <input  name="mail" type="text"/> </p>
</form>

<input type="button" value="提交" id="submit">

 

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，可以选择将其隐藏.

然后将insert方法改为insertSelective

Selective意为选择的

两者的区别是后者insertSelective如果遇到null的字段，会过滤，而前者是会把所有字段的值原封不动的插入，即使值为null

再试一次，还是报错：

java.sql.SQLException: Field 'id' doesn't have a default value

因为id还是null，每次都让前端传id这个字段 不是很现实，因为id本来就只是用来计数而已的，可以设置id为自增即可，这样即使id为null也不会报错，数据库会自增id

如果使用Navicat for Mysql，只需右键表-->设计表，选择要自增的列，勾选自增即可，如下图：

 

若是命令行，则可以使用：

alter table t1 change column id id int not null primary key auto_increment;

 

再试一次，成功