AJAX SpringBoot 前后端数据交互的项目实现

讲解"AJAX SpringBoot前后端数据交互的项目实现"的步骤及示例：

1. 准备工作

首先，需要搭建好Spring Boot的环境，并在其中添加对thymeleaf和web模块的支持。若需要使用ORM,还需要添加对JPA的支持。

在前端部分，需要准备好HTML、CSS和JS等组件。

2. 建立一个Spring Boot项目

使用Spring Initializr（或其他方式）建立Spring Boot项目。

3. 设计前端页面

根据需求，设计前端的HTML页面，并在其中引用所需的JS和CSS文件。

以查询书籍为例，可以设计一个简单的表单，用来输入书籍的名称：

<form id="searchForm">
  <input type="text" name="keyword" id="keyword">
  <button type="submit">搜索</button>
</form>

4. 设计控制器

使用Spring Boot中的@Controller注解创建一个BookController类，用于接收查询书籍的请求。

@Controller
public class BookController {

  @Autowired
  private BookRepository bookRepository;

  ...
}

在BookController中，也可以添加/postMapping的函数，通过@ResponseBody注解，将java对象转化为json格式。

5. 设计后端API

在控制器中添加与前端对接的API接口，用于接收前端传递来的数据，并返回查询结果。

@GetMapping("/book/{keyword}")
@ResponseBody
public List<Book> getBooks(@PathVariable("keyword") String keyword) {
  List<Book> books = bookRepository.findByTitleLike("%" + keyword + "%")
  return books;
}

6.前端AJAX数据请求

在前端JS文件中，使用AJAX技术向后端发送请求，获取查询结果。

$("#searchForm").submit(function(event) {
  event.preventDefault();
  var keyword = $("#keyword").val();
  $.ajax({
    url: '/book/' + keyword,
    method: 'GET',
    success: function(result){
      //处理返回的json对象
      console.log(result);
    }
  })
})

在AJAX响应成功后，可以对返回的json数据进行处理。

示例

这里提供两个示例：

示例一：根据书名查询书籍

前端HTML代码：

<form id="searchForm">
  <input type="text" name="keyword" id="keyword">
  <button type="submit">搜索</button>
</form>

<div id="searchResult"></div>

前端JS代码：

$("#searchForm").submit(function(event) {
  event.preventDefault();
  var keyword = $("#keyword").val();
  $.ajax({
    url: '/book/' + keyword,
    method: 'GET',
    success: function(result){
      var books = "";
      for (var i = 0; i < result.length; i++) {
        var book = result[i];
        books += "<div>" + book.title + " - " + book.author + "</div>";
      }
      $("#searchResult").html(books);
    }
  })
})

控制器代码：

@GetMapping("/book/{keyword}")
@ResponseBody
public List<Book> getBooks(@PathVariable("keyword") String keyword) {
  List<Book> books = bookRepository.findByTitleLike("%" + keyword + "%");
  return books;
}

示例二：向后端添加书籍

前端HTML代码：

<form id="addBookForm">
  <input type="text" name="title" id="title">
  <input type="text" name="author" id="author">
  <button type="submit">添加</button>
</form>

前端JS代码：

$("#addBookForm").submit(function(event) {
  event.preventDefault();
  var title = $("#title").val();
  var author = $("#author").val();
  var data = {
    title: title,
    author: author
  }
  $.ajax({
    url: '/book',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function(result){
      alert("添加成功");
    }
  })
})

控制器代码：

@PostMapping("/book")
@ResponseBody
public String addBook(@RequestBody Book book) {
  bookRepository.save(book);
  return "添加成功";
}

以上是"AJAX SpringBoot前后端数据交互的项目实现"的攻略，希望能够对你有所帮助。