SpringBoot 使用ajax前后端交互_spring前后端ajax-程序员宅基地

技术标签： 前端  SpringBoot  JavaWeb  ajax  jquery  springboot  

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

 

再试一次，成功

 

 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcc27857285/article/details/89160270

智能推荐

简化VUE路由_vue @/views-程序员宅基地

文章浏览阅读340次。当页面很多时，vue路由也会随之增多，从而增加代码量。生产环境中的路由建议使用懒加载模式开发环境中的路由不使用懒加载，会造成webpack热更新缓慢先在router文件夹下建立三个文件，index.js、import-development.js、import-production.jsindex.js//普通路由const routes = [ { path: '/login', name: 'login', componen_vue @/views

教父2-英文版-程序员宅基地

文章浏览阅读2k次。MARIO PUZO'S THE GODFATHER PART IIby Mario Puzo and Francis Ford CoppolaFADE FROM BLACK TO: MICHAEL, in profile looking downward. He holds out his hand and ROCCO kissing it.DISSOLVE TO: A ..._教父2英文版

pydot_ng.InvocationException:Program terminated with status:1. stderr follows: Format:“ps” not ……_invocationexception: program terminated with statu-程序员宅基地

文章浏览阅读5.5k次，点赞26次，收藏9次。在曲折地安装完graphviz之后，运行代码时出现这个问题（安装graphviz的教程：https://blog.csdn.net/wyx100/article/details/80253072or https://blog.csdn.net/Snowy_susu/article/details/90439423?ops_request_misc=&request_id=&..._invocationexception: program terminated with status: 1. stderr follows: form

springboot2.2整合spring-data-elasticsearch3.2_spring data elasticsearch health check close sprin-程序员宅基地

文章浏览阅读4k次。环境：Elasticsearch:7.4.1Springboot:2.2.1Spring-data-elasticsearch:3.2.0IDE:STS_3.9.2.RELEASEpom.xml配置<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0..._spring data elasticsearch health check close spring 3.2

图形化编程Mixly——RFID智能门禁_csdnrfidmixly-程序员宅基地

文章浏览阅读2.4k次，点赞2次，收藏11次。文章目录1.软硬件连接2.图形化编程块3.代码块4.实验成果实验材料与环境1、硬件Arduino开发板、舵机SG90、RFID-RC522读卡器、校园卡、杜邦线若干2、软件Mixly IDE（下载地址：https://pan.baidu.com/s/1vKnY-vC4LU0qMFitArEXfw提取码：tbfe）实验内容【1】读取校园卡ID号。【2】读取到指定校园卡时S..._csdnrfidmixly

java/jsp/ssm基于web的多媒体素材管理系统【2024年毕设】_基于web的多媒体素材管理系统zip-程序员宅基地

文章浏览阅读53次。springboot基于Springboot的企业cms内容管理系统。springboot基于Vue和Springboot的会议室管理系统。开发软件：eclipse/myeclipse/idea。springboot中小型企业物流管理系统的设计与实现。springboot微信小程序的食谱大全“食全食美”springboot基于微信小程序的舟袍设计工作室。ssm基于web的佳茗天香茶品销售平台的设计与实现。springboot医考答题练习系统的设计与实现。springboot微信小程序的火锅店点餐系统。_基于web的多媒体素材管理系统zip

随便推点

BeanDefinitionRegistryPostProcessor详解-程序员宅基地

文章浏览阅读8.8k次，点赞5次，收藏22次。接口该接口继承了BeanFactoryPostProcessor接口，此接口中只有一个方法，就是postProcessBeanDefinitionRegistry(BeanDefinitionRegistry registry)代码public interface BeanDefinitionRegistryPostProcessor extends BeanFactoryPostProcessor { /** * Modify the application context's intern_beandefinitionregistrypostprocessor

Mac m2 Ventura(13.4)安装Cocoapods_mac m2 安装cocoapods-程序员宅基地

文章浏览阅读2.1k次，点赞3次，收藏7次。报错：You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory。或者配置 hosts 185.199.108.133 raw.githubusercontent.com。3.使用ruby 版本管理安装 新的ruby。2.安装新的homebrew(参考 官网。非常不推荐 sudo 安装！6.不需要 sudo。_mac m2 安装cocoapods

PL2303驱动安装需要联网_ztekdriver_pl2303-程序员宅基地

文章浏览阅读255次。在使用PL2303驱动时，需要连接网络。例如：USB-RS232插入电脑后会在windows10系统设备管理中的其他设备中显示USE-Ser！这个表示没有安装驱动，我安装了PL2303驱动后也没办法使用，后来在网络连接之后等待大约10分钟后可用。_ztekdriver_pl2303

Android P Camera架构_android camera2 id 103-程序员宅基地

文章浏览阅读3.1k次。一、APP层打开摄像头：openCamera();二、frameworks层：CameraManager：代码路径：\frameworks\base\core\java\android\hardware\camera2\CameraManager.javaprivate CameraDevice openCameraDeviceUserAsync(String cameraId, ..._android camera2 id 103

米家接入HomeKit系列二：通过群辉NAS的Docker搭建HomeAssistant_群晖接入米家-程序员宅基地

文章浏览阅读1.1w次，点赞5次，收藏41次。通过前面的文章我们已经知道我们为什么要搭建HomeAssistant，那么本篇文章我们就来给大家讲解如何通过群辉NAS的Docker搭建HomeAssistant，以及其基本的配置和使用。_群晖接入米家

Windows 10下载安装openjdk及环境变量配置（以openjdk 8为例）_openjdk环境变量配置-程序员宅基地

文章浏览阅读9.2k次，点赞7次，收藏13次。Windows 10下载安装openjdk及环境变量配置（以openjdk 8为例）Windows 10下载安装openjdk及环境变量配置下载地址https://www.azul.com/downloads/zulu-community/?package=jdk安装双击已下载的安装包点击Next，安装目录可以自己定义点击Next进入安装界面进行安装安装完成后显示如下界面设置环境变量1.进入环境变量配置界面1.右键点击计算机–>属性–>高级系统设置–>高级_openjdk环境变量配置

推荐文章

热门文章

相关标签