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

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模板,没有引用的请忽略!

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将从数据库查询出的数据以JSON格式展示在index.html,可以通过以下步骤实现: 1. 创建Spring Boot项目,并添加依赖:spring-boot-starter-web、spring-boot-starter-data-jpamysql-connector-java等。 2. 在application.properties或application.yml配置数据库相关信息,如下所示: ``` spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase spring.datasource.username=root spring.datasource.password=123456 spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.jpa.show-sql=true spring.jpa.hibernate.ddl-auto=update spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect ``` 3. 创建实体类,并使用JPA注解将实体类映射到数据库,如下所示: ``` @Entity @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private Integer age; private String gender; // getter和setter方法 } ``` 4. 创建一个Repository接口,并继承JpaRepository接口,实现对User实体类的基本操作,如下所示: ``` @Repository public interface UserRepository extends JpaRepository<User, Long> { List<User> findByName(String name); List<User> findByGender(String gender); } ``` 5. 创建一个Controller类,使用@RestController注解,实现对User实体类的查询操作,并返回JSON格式的数据,如下所示: ``` @RestController public class UserController { @Autowired private UserRepository userRepository; @GetMapping("/users") public List<User> getUsers() { return userRepository.findAll(); } @GetMapping("/users/{id}") public User getUserById(@PathVariable Long id) { return userRepository.findById(id).orElse(null); } @GetMapping("/users/name/{name}") public List<User> getUserByName(@PathVariable String name) { return userRepository.findByName(name); } @GetMapping("/users/gender/{gender}") public List<User> getUserByGender(@PathVariable String gender) { return userRepository.findByGender(gender); } } ``` 6. 在index.html使用jQueryajax方法,通过HTTP GET请求获取UserController返回的JSON数据,并将数据展示在页面上,如下所示: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>User List</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $.getJSON("/users", function(data) { $.each(data, function(index, user) { var row = $("<tr><td>" + user.id + "</td><td>" + user.name + "</td><td>" + user.age + "</td><td>" + user.gender + "</td></tr>"); $("#userTable").append(row); }); }); }); </script> </head> <body> <h1>User List</h1> <table id="userTable"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </table> </body> </html> ``` 以上就是从数据库查询出数据以JSON格式展示在index.html的步骤。通过这种方式,可以方便地将数据库数据展示在Web页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值