SpringBoot 使用ajax前后端交互
一.实现HTML页面跳转，跟springMVC类似
1.pom.xml加入依赖
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>
2.新建IndexController
@Controllerpublic 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")@ResponseBodypublic 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;
再试一次，成功
分手后的思念是犯贱
桃扇骨
亦凉
淩亂°似流年
柔情只为你懂
╰+哭是因爲堅強的太久メ
向右看齐
还没有评论，来说两句吧...