Springboot 运用ajax将前端数据传递到后台实体类并保存在数据库中。JPA、ajax、springboot

最新推荐文章于 2022-09-22 13:40:22 发布

原创最新推荐文章于 2022-09-22 13:40:22 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #mysql #java #后端 #spring boot

本文介绍如何使用SpringBoot接收前端通过Ajax发送的数据，并将数据保存到数据库的过程。具体包括实体类、JPA接口及Controller的实现，以及前端数据提交的Ajax代码。

Springboot 运用ajax将前端数据（当只有一个标签时）传递到后台实体类并保存在数据库中。

实体类代码：

@Entity
@Table(name = "board_info")
public class BoardInfo {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)//自增主键
    private  Integer boardId;

   //这是数据库表对应的一个列
    @Column(name = "board_name")
    private   String boardName;


    @Column(name = "board_state" ) 
    private  String boardState;

    @Column(name = "board_Date")
    private Date boardDate;


    public String getBoardName() {
        return boardName;
    }

    public void setBoardName(String boardName) {
        this.boardName = boardName;
    }


    public Date getBoardDate() {
        return boardDate;
    }

    public void setBoardDate(Date boardDate) {
        this.boardDate = boardDate;
    }


    public String getBoardState() {
        return boardState;
    }

    public void setBoardState(String boardState) {
        this.boardState = boardState;
    }


    public Integer getBoardId() {
        return boardId;
    }

    public void setBoardId(Integer boardId) {
        this.boardId = boardId;
    }



    @Override
    public String toString() {
        return "BoardInfo{" +
                "boardId=" + boardId +
                ", boardName='" + boardName + '\'' +
                ", boardState='" + boardState + '\'' +
                ", boardDate=" + boardDate +
                '}';
    }
}

JPA接口：

public interface BoardInfoDao extends JpaRepository<BoardInfo,Integer>,JpaSpecificationExecutor<BoardInfo> {
}

控制器层Controller:

@Controller
public class EmployeeController {
   @Autowired
    BoardInfoDao boardInfoDao;
 @RequestMapping(value = "/emps/boardInsert")
    @ResponseBody
    public BoardInfo boardInfoSave(@RequestBody String boardName) {
        //创建日期对象
        Date date = new Date(System.currentTimeMillis());
        //创建BoardInfo对象
        BoardInfo boardInfo = new BoardInfo();
        //设置值
        System.out.println(boardName);
        boardInfo.setBoardState("空闲");
        boardInfo.setBoardDate(date);
        boardInfo.setBoardName(boardName);
        //将值保存用JPA接口保存到数据库中
        BoardInfo boardSave = boardInfoDao.save(boardInfo);
        return boardInfo;
    }
}

前端代码：

<input type="text" th:name="boardName" name="boardName" class="InputStyle" id="boardName" th:id="boardName"/>
  <input type="submit" value="添加" class="FunctionButtonInput"  onclick="add()">

ajax代码

  <script type="text/javascript">
        function add() {
            var boardName = $("#boardName").val();
            alert(boardName)
            var data = JSON.stringify(boardName);
            $.ajax({
                type: "POST",
                data: data,
                contentType: "application/json",
                dataType: 'json',
                url: "/emps/boardInsert",
                susccess: function (data) {
                    if (data != null)
                        alert("添加成功！")
                    else
                        alert("添加失败")
                },
            });
        }
	</script>

引入jquery代码：

 <script type="text/javascript" src="style/js/jquery.js" th:src="@{/style/js/jquery.js}"></script>

注：前端运用了thymeleaf模板，没有引用的请忽略！