如何通过点击 li 元素触发 Spring boot 表单提交？

Question

我的用户个人资料页面有一个侧边栏，其中包含两个项目，用于 1) 更新信息和 2) 显示用户已经撰写的评论。 第一项工作完美（因为它包括一个form 并有一个submit 按钮）。但对于第二个，我不知道。目标是当我点击My Reviews 时，会调用控制器类中的一个方法，从数据库中提取用户的评论并将结果显示在页面右侧。 由于我没有第二个项目的submit 按钮或form，我不知道如何实现它。 这是我的代码：

        <div class="module-inner">
                    <div class="side-bar">                      
                        <nav class="side-menu">
                            <div class="col-xs-3">
                                <ul class="nav nav-pills nav-stacked">
                                    <li class="active"><a data-toggle="pill" href="#profile">Profile</li>
                                    <li class="active"><a data-toggle="pill" href="#review">My
                                            Reviews</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>

                    <div class="content-panel">
                        <div class="col-xs-9">
                            <div class="tab-content">
                                <div id="profile" class="tab-pane fade">
                                    <form class="form-horizontal" th:action="@{/edit_profile}">                                         <fieldset class="fieldset">
                                            <h3 class="fieldset-title">Personal Info</h3>
                                            <div class="form-group">
                                                <label class="col-md-2 col-sm-3 col-xs-12 control-label">User
                                                    Name</label>
                                                <div class="col-md-10 col-sm-9 col-xs-12">
                                                    <input type="text" class="form-control"
                                                        th:disabled="${currentUser.email}"
                                                        th:value="${currentUser.email}">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-md-2 col-sm-3 col-xs-12 control-label">First
                                                    Name</label>
                                                <div class="col-md-10 col-sm-9 col-xs-12">
                                                    <input name="firstname" type="text" class="form-control"
                                                        th:value="${currentUser.firstname}">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-md-2 col-sm-3 col-xs-12 control-label">Last
                                                    Name</label>
                                                <div class="col-md-10 col-sm-9 col-xs-12">
                                                    <input name="lastname" type="text" class="form-control"
                                                        th:value="${currentUser.lastname}">
                                                </div>
                                            </div>
                                        </fieldset>

                                        <hr>
                                        <div class="form-group">
                                            <div
                                                class="col-md-10 col-sm-9 col-xs-12 col-md-push-2 col-sm-push-3 col-xs-push-0">
                                                <input class="btn btn-primary" type="submit"
                                                    value="Update Profile">
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                <div id="review" class="tab-pane fade">
                                    <h3>Menu 2</h3>
                                    <p>You have no reviews yet.</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

这是我的控制器：

@RequestMapping(value = "/findUserReviews", method = RequestMethod.GET)
public ModelAndView findUserReviews() {
    ModelAndView modelAndView = new ModelAndView();
    Authentication auth = SecurityContextHolder.getContext().getAuthentication();
    User user = userService.findUserByEmail(auth.getName());
    ..
    modelAndView.addObject("reviews", reviewRepository.findUserRevies());

    modelAndView.setViewName("profile");
    return modelAndView;
}

我使用以下技术：Spring boot、Hibernate 和 Thymeleaf。

任何帮助将不胜感激。

最终更新：接受答案中提供的代码有效，前提是我不返回 ModelAndView 而是 List<Review>。

Answer 1

通过 Ajax 调用，您可以使用 javascript 调用控制器端点。一个 ajax 调用如下所示：

function getReviews() {
$.ajax({
    type: "GET",
    url: "/users/findUserReviews", //example
    dataType: "JSON",
    success: function (data) {
        //do something with this JSON
        fillReviews(data);
    }
});
}

现在您可以将此函数用作按钮的on-click 事件。而fillReviews()是一个函数，它从jsp页面获取id="review"的元素，并用获取的数据创建列表树。

function fillReviews(data) {
  var reviewDiv= document.getElementById('review');
  var reviewList = document.createElement('ul');
  for ( var i=0 ; i < data.length; i++)
    {
      var reviewListItem = createListItem(data[i]);
      reviewList.appendChild(reviewListItem);
    }
  reviewDiv.appendChild(reviewList);
}

createListItem(data[i]) 可能看起来像这样：

function createListItem(data)
{
  var listItem = document.createElement('li');
  listItem.innerHTML = data["reviewName"]; // for example ..
  return listItem;
}

现在您所要做的就是在此处致电getReviews()：

<button onclick="getReviews()"/>

EDIT ：来自 ajax 调用的“数据”是 JSON。例如，“/users/findUserReviews”应该返回一个List<Review>。并且无需更改您原来的“/findUserReviews”端点。这只是一个示例，您可以在控制器中创建一个返回列表的新端点。