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

Question

我的用户个人资料页面有一个侧栏，其中有两个项目:1) 更新信息和 2) 显示用户已撰写的评论。第一项工作完美(因为它包含 form 并具有 submit 按钮)。但对于第二个，我不知道。目标是当我点击My Reviews时，调用 Controller 类中的方法，从数据库中提取用户的评论，并将结果显示在页面的右侧。因为我没有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>

这是我的 Controller :

@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 调用 Controller 端点。一个 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()"/>

编辑:ajax 调用中的“数据”是 JSON。因此“/users/findUserReviews”应该返回 List<Review>例如。并且无需更改原始的“/findUserReviews”端点。这只是一个示例，您可以在 Controller 中创建一个返回列表的新端点。