Question

尝试添加模型确认页面（继续/取消），其中包含一些信息。

信息来自带有几个输入的表单......

我创建了一个小项目，我认为它符合这个要求。

在提交之前，我想在模态页面中显示一个值，具体取决于在表单中输入的值。在这种情况下，我有3个输入来做一个简单的总和。

因此模态页面显示总和，用户可以决定是否继续。

这是项目的链接。我陷入了index.html jquery部分。

[https://github.com/davisoski/action-listener][1]

我认为这是正确的方法，但我不能在我的情况下做到

[https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/][2]

任何想法

更新1

我有一个包含3个字段的简单表单。我有一个带有/ saveform后映射的控制器，这个方法只是调用一个服务并进行总结。没问题。

<form action="#" th:action="@{/saveform}" th:object="${modelform}"
                    method="post">

    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">
            <label class="col-form-label col-form-label-sm" for="value1">Value1</label>
            <input class="form-control form-control-sm" th:field="*{value1}"
                id="value1" type="text" />
        </div>
    </div>
    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">
            <label class="col-form-label col-form-label-sm" for="value2">Value2</label>
            <input class="form-control form-control-sm" th:field="*{value2}"
                id="value2" type="text" />
        </div>
    </div>
    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">
            <label class="col-form-label col-form-label-sm" for="value3">Value3</label>
            <input class="form-control form-control-sm" th:field="*{value3}"
                id="value3" type="text" />
        </div>
    </div>

    <div class="form-group row">
        <div class="col-12 col-md-6  col-lg-3">

            <a data-toggle="modal" href="#myModal" class="btn btn-primary"><i
                class="icon-plus-squared"></i><span>Calculate Sum</span></a> <a
                data-toggle="modal" href="#myModal" class="btn btn-primary"
                th:onclick="'javascript:openModal();'"><i
                class="icon-plus-squared"></i><span>Calculate Sum2</span></a>



        </div>
    </div>

</form>

我想要做的是在流程的中间放置一个带有该总和的模态页面，以便用户可以决定是继续还是取消

我添加了这样的模型（请参阅github项目中的index.html），我无法看到对方法或其他东西进行谓词调用的方法，以在模型页面中显示sum的值。我以前在JSF中使用actionListeners，但在这里我不知道如何做到这一点。来自qtzar.com的博客给了我一个想法

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">We have calculated the sum of
                    values</h5>
                <button type="button" class="close" id="close"
                    data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you agree with this sum???</p>
            </div>
            <div class="modal-footer">
                <!-- 
                <a href="#" data-dismiss="modal" class="btn">Close</a> <a
                    href="#" class="btn btn-primary">Save changes</a>
-->
                <button type="button" class="btn btn-primary btn-ok"
                    id="continue">Continue</button>
                <button type="button" class="btn btn-danger"
                    data-dismiss="modal" id="cancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

更新2

它应该是这样的：

$(function() {
        $.ajax({
            url : "/sum",
            success : function(data) {
                $("#modalHolder").html(data);
                $("#myModal").modal("show");
            }

        });

    }

并在控制器中定义@RequestMapping

@RequestMapping("/sum")

但是我看不出如何传递参数以及将返回值放到模态

的位置

更新3：

修改后的模态页面，添加了：fragment：

        <!--  Modal -->
        <div class="modal" id="personModal" role="dialog"
            th:fragment="modalContents">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">We have calculated the sum of values</h5>
                        <button type="button" class="close" id="close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you agree with this sum???</p>
                        <h4 class="btn" th:text="${sum}"></h4>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-primary btn-ok" id="continue">Continue</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"
                            id="cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>

在控制器中添加了两个方法，一个用于计算在模态对话框中显示的总和，另一个用于发送到服务器。

@PostMapping({ "/saveform" })
    public String saveForm(Model model, RedirectAttributes ra) {
        LOG.info("HomeController.saveForm");

        //Simulate the sum
        model.addAttribute("sum", "25");

        return "/::modalContents";

    }

    @RequestMapping("/sum")
    public String mySum(Model model) {

        model.addAttribute("sum", "24");

        return "/::modalContents";

    }

I'm think I'm close, but I'm getting error 500.


  [1]: https://github.com/davisoski/action-listener
  [2]: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/

Answer 1

我不确定这是否是您正在寻找的答案，因为它没有直接提供Model对象，但由于没有人回答这个问题，我会在至少为您提供一种获取请求参数的方法。

这是我前一段时间编写的一些代码的一部分，您可以使用@RequestParam来获取参数。 database/addUser方法的示例请求为database/addUser?id=12&bookingIds=1&bookingIds=11&name=Olafur&email=classified@nothere.com，您当然可以使用ajax创建

此外，您可能只是发送Spring＆＃34; / sum＆＃34;没有任何数据。

如果这对你没有帮助，我真的很抱歉，所以请在这种情况下自由选择。我将为您留下一段代码，其中解释了@ReqeuestParam的大量语法。：）

@RestController
@RequestMapping(path="/database") 
public class MainController {

    @CrossOrigin
    @GetMapping(path = "/addUser") // Map ONLY GET Requests
    public @ResponseBody
    String addNewUser(
         @RequestParam(required = false) Long id,
         @RequestParam(required = false) ArrayList<Long> bookingIds,
         @RequestParam(required = false) ArrayList<Long> reviewIds,
         @RequestParam String name,
         @RequestParam String email
    ) {
        UserEntity u = new UserEntity();
        if(id != null)        u.setId(id);
        if(bookingIds != null) u.setBookingIds((Map<Integer, Long>) Converter.arrayListToMap(bookingIds));
        if(reviewIds != null) u.setReviewIds((Map<Integer, Long>) Converter.arrayListToMap(bookingIds));
        u.setName(name);
        u.setEmail(email);
        u = userRepository.save(u);
        return u.getId().toString();
    }

在提交之前显示模态页面中控制器的值

1 个答案: