Spring boot 如何将对象动态传递给模态

我试图动态地填充一个模态

首先，我通过AJAX发出GET请求，在该请求中我发送所需对象的id。然后我尝试更新我的模型属性，以便获得所需对象。这就是所有失败的地方。我无法更新模型的属性

否则一切正常。模态打开，但没有更新其html

理想情况下，我希望这个问题能得到如下解决：

1） 模态打开

2） Ajax请求

3） Modal的html已更新

我使用Thymyleaf作为我的模板引擎

---

MainController.java

@RequestMapping("/main")
public String main(Model model)
{

    model.addAttribute("allVehicles", allVehicles);
    model.addAttribute("selectedCar", new Car());

    return "main";
}

@RequestMapping("/car/{id}")
@ResponseStatus(value = HttpStatus.OK)
public void car(@PathVariable("id") String id, Model model)
{
    Car car = updateCarById(id);
    model.asMap().replace("selectedCar", car);
}

---

main.html

...
<div th:each="vehicle : ${allVehicles}">    
    <div th:each="car : ${vehicles.allCars}">
        <a th:onclick="'javascript:openModal(\'' + ${car.id} + '\');'">
        </a>
    </div>|
</div>
...
<script th:src="@{/js/car-viewer.js}"></script>

<div th:fragment="carModalFragment">
<div class="modal fade" id="carModal" tabindex="-1" role="dialog" aria-labelledby="carModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="carModalLabel" th:text="${selectedCar.name}"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" th:text="${selectedCar.cost}"></span>
                </button>
            </div>
            ...
        </div>
    </div>
</div>
</div>

---

carModalFragment.html

...
<div th:each="vehicle : ${allVehicles}">    
    <div th:each="car : ${vehicles.allCars}">
        <a th:onclick="'javascript:openModal(\'' + ${car.id} + '\');'">
        </a>
    </div>|
</div>
...
<script th:src="@{/js/car-viewer.js}"></script>

<div th:fragment="carModalFragment">
<div class="modal fade" id="carModal" tabindex="-1" role="dialog" aria-labelledby="carModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="carModalLabel" th:text="${selectedCar.name}"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" th:text="${selectedCar.cost}"></span>
                </button>
            </div>
            ...
        </div>
    </div>
</div>
</div>

...

在这里，你想要的东西和你拥有的东西之间已经断开了连接。例如：

在模态中有许多表达式，例如：

${selectedCar.name}

。在控制器中，您正在设置

model.addAttribute（“selectedCar”，new Car（））

这意味着使用

${selectedCar}

的任何表达式都将使用空白对象

在ajax中，您将调用以下URL:

URL:“/car/”+id，

。该URL的控制器没有返回任何数据，它只是返回一个重定向

return“redirect:/main”转到另一页。（JavaScript并没有对返回执行任何操作，只是显示模式。）

我认为最简单的解决方法是：

在主控制器中，将其更改为返回正在选择的车辆：

@ResponseBody
@RequestMapping("/car/{id}")
public Car car(@PathVariable("id") String id, Model model) {
    Car car = null;
    // car = findCarById(id); <-- implement this
    return car;
}

尝试将这些添加到控制器中

@RequestMapping("/main")
public String main(Model model)
{
    model.addAttribute("allVehicles", allVehicles);
    model.addAttribute("selectedCar", new Car());
    return "main";
}

@RequestMapping("/car/{id}")
@ResponseStatus(value = HttpStatus.OK)
public String getCarView(@PathVariable("id") String id, Model model)
{
    Car car = updateCarById(id);
    model.addAttribute("selectedCar", car);
    return "../pathToHtml/carModalFragment :: carModalFragment";
}

并更改下面的.js文件

function openModal(id) {
  $.ajax({
    url: "/car/" + id,
    success: function (response) {
      $("#carViewModal").empty().append(response);
      $("#carViewModal").modal("show");
    }
  });
}

我想通过整个物体。不仅仅是属性。基本上，模型需要更新。我不确定你的意思。。。模型只是所有属性的集合，对吗？你不能把所有的属性都添加到模式中吗？我是说对象的属性。不是模型的属性。从您的回答中，我了解到我必须从对象（汽车）中提取名称、成本和其他属性。问题是这个对象太复杂了，不能用这种方式实现。你还能用别的方法实现它吗？你想根据对象的属性自动生成对象的html吗？好吧，有太多的未知因素，无法尝试编写它。如果你有一个问题或例子等等，那是一件事。。。但在我看来，这里的内容基本上是编写整个应用程序。在函数调用中传递完整的对象，而不是仅传递id，并在ajax请求成功后更新该对象，它将更新Html中的值。我不知道spring的语法，但它在angular.Thymeleaf中对我有效。Thymeleaf在服务器端呈现html。所以，我不能用JavaScript更新模型。