如何将变量发送到控制器，而不是作为 Spring Boot 中的表单输入

Question

我正在使用带有 Tymeleaf 的 Spring Boot，并且对它相当陌生。我正在使用 Twitter API 来制作应用程序。我有一个使用th:each 显示的推文列表。当用户单击推文的转推按钮时，该推文的 id 应作为转推方法的参数发送到控制器，以便在那里进行处理。用户不应该知道前端的 id。

到目前为止，我唯一的解决方案是将 id 作为 url 包含在“a”标签中，并在控制器中使用 @PathVariable 将其作为路径变量，并返回包含推文列表的索引页面.这很好用，但我不喜欢这种方法，因为用户不必离开页面，我以后可能更喜欢使用模式。基本上我想知道一种将 id 发送到控制器而不用 HTML 显示的方法。

index.html

 <div class="result" th:each="result : ${results}">
            <h3><a th:href="${result.fromUser}" th:text="${result.user.name}"></a></h3>

            <p th:text="'@' + ${result.fromUser}"></p>
            <span th:text="${result.text}"></span>
            <div id="retweet">
                    <a th:href="'user/' +  ${result.id}">Retwt</a>

            </div>
        </div>

主控制器.java

@RequestMapping(value = "")
public String getUserProfile(Model model) {
    TwitterProfile userInfo = twitterService.getUserProfile();
    List<Tweet> homeTimeline = twitterService.getUserTimeline();
    model.addAttribute("profileImg", userInfo.getProfileImageUrl());
    model.addAttribute("results", homeTimeline);
    return "pages/index";
}

@RequestMapping(value = "/user/{id}", method = RequestMethod.GET)
public String retweet(@PathVariable long id) {
    twitterService.retweet(id);
    return "/";
}

Answer 1

这可以通过改变你的控制器方法来实现，并使用 jQuery ajax http GET 访问它。

更改控制器以接受 ajax 请求，

    @ResponseBody    
    @RequestMapping(value = "/user", method = RequestMethod.GET)
    public String retweet(@RequestBody Long id) {
        twitterService.retweet(id);
        return "/";
    }

更改您的 HTML，

 <div class="result" th:each="result : ${results}">
            <h3><a th:href="${result.fromUser}" th:text="${result.user.name}"></a></h3>

            <p th:text="'@' + ${result.fromUser}"></p>
            <span th:text="${result.text}"></span>
            <div id="retweet">
                    <a href="JavaScript:Void(0);" th:onclick="'doRetweet(\'' + ${result.id} + '\');'" >Retwt</a>

            </div>
        </div>

JQuery 部分，

                     function doRetweet(userId){
                        var data = JSON.stringify(userId)
                        if (data) {
                            $.ajax({
                                url : '/user',
                                headers : {
                                    'Content-Type' : 'application/json'
                                },
                                method : 'GET',
                                dataType : 'json',
                                data : data,
                                success : function(data) {
                                    if (data.status == 200) {
                                        // Handle success response
                                    } 
                                },

                                error : function(xhr, status, error) {
                                    // Handle errors here
                                }
                            });
                        }
                    }