javascript - Thymeleaf - 尝试为每个图像创建一个删除按钮

Question

所以，我想为每个可用图像创建一个删除按钮。问题是当我单击删除按钮时，它甚至没有转到 Controller

Controller

@Autowired
private PropertyClientService propertyClientService;

@GetMapping(value = {"/property/list"})
public ModelAndView list() {
    return new ModelAndView("property/list.html");
}

@GetMapping(value = {"/property/edit/{id}"})
public String edit(@PathVariable Long id, Model model) {
    model.addAttribute("property", propertyClientService.get(id));
    return "property/edit";
}

 @DeleteMapping(value = {"/property/deleteimage/{id}"}, params = "action=deleteImage")
public String deleteImage(
        @PathVariable Long id) {
    propertyClientService.deleteImage(id);
    return "redirect:/admin/property/list";
}

html 与 thymeleaf

                        <form class="form form-horizontal" name="editProperty"
                          th:action="@{/admin/property/update/}+${property.id}" th:object="${property}"
                          method="post">
                           <div class="form-group">
                            <label class="col-sm-4 control-label">
                                Photo:
                            </label>
                            <div class="col-sm-8" id="photo" th:each="image : *{images}">
                                <img th:src="${image.url}"/>
                                <a th:href="|@{/admin/property/deleteimage/}+${id}|" class="btn btn-danger" value="deleteImage">Delete</a>
                                <!--<button type="submit" name="action" value="deleteImage">Delete Image</button>-->
                            </div>

                            <a href="javascript:void(0)" onclick="addMoreFiles('addPhoto')" class="btn btn-default">Add
                                Photo</a>

                            <div class="col-sm-10 addPhoto">
                                <input type="file" name="addPhoto" onchange="readURL(this);"/><br/>
                            </div>
                            </div>
                    </form>

错误

There was an unexpected error (type=Method Not Allowed, status=405). Request method 'GET' not supported

我是编程世界的新手。如果代码不整洁或存在愚蠢的错误或我提出问题的方式不好，请原谅。请用简单的话指导我，谢谢:)

Answer 1

您的 Controller 中正在等待删除请求，但您的链接并不满意:

<a th:href="|@{/admin/property/deleteimage/}+${id}|" class="btn btn-danger" value="deleteImage">Delete</a>它产生一个 GET 请求。

你可以做两件事:

1. 您可以将映射更改为 GetMapping。
2. 您可以使用 JS 函数发送表单，并且在发送时可以将方法更改为 DELETE。