Question

如何在JavaScript中访问变量（在控制器中作为属性添加为变量）以及如何使用它的属性？

我的模特：

public class Category {
    private Long id;
    private String name;
    private List<Recipe> recipes = new ArrayList<>();
}

我的控制器：

@RequestMapping(path = "/", method = RequestMethod.GET)
public String showAllCategories(Model model) {
    List <Category> categories = categoryService.findAll();
    model.addAttribute("categories", categories);
    return "index";
}

在我的网页上，我需要显示所有类别（没问题，使用Thymeleaf th：each =“category：${categories}"）并且能够将新类别添加到categories变量并设置其属性（id，name，食谱例如）。那么，我如何能够访问JavaScript中的变量“类别”，以及如何在JavaScript中添加新元素和设置属性？

Answer 1

您可以对此方法进行ajax调用

// using jquery
 $.ajax({
    url:'/',
    success:function(response){
       // get the return pf the method here
       // can be assigned to any variable
    }

java方法更改

 @RequestMapping(path = "/", method = RequestMethod.GET)
public String showAllCategories(Model model) {
     //rest of code
    return (the value which which you want to assign to model property);
}

Explore more about ajax

Answer 2

您必须创建一个API。例如Rest。我们的想法是创建可通过javascript调用的方法（例如，通过AJAX），并执行您需要在java中执行的操作。

这里有一些伪代码：

@RequestMapping(path = "/addCategory", method = RequestMethod.GET)
public boolean AddCategory(Model model) {
  //Do your logic to add category

  if (/*everything went good*/) return true;
  else return fale;
}

Answer 3

为什么要使用Model ?,当您可以JSON直接访问对象时：

使用Angular的JS代码段：

$http.get('/app/get').then(function(response) {
        $scope.categoryList = response.data;
 }, function(response) {
});

使用Jquery的JS代码段：

$.ajax({
        url: "/app/get",
        type: 'GET',
        success: function(response) {
        var categoryList = response.data;
        console.log(categoryList);
      }
});

Java代码段

@RestController
@RequestMapping
public class Controller {

@RequestMapping(path = "/get", method = RequestMethod.GET)
public List <Category> showAllCategories() {
    return categoryService.findAll();
 }
}

从JavaScript访问Spring Model变量

3 个答案: