尝试将我的数据从 Controller 传递到模态页面。

点击此链接: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/

首先: Controller 中查询数据库的简单方法

@PostMapping("/showarea")
public String areaModel(Model model) {
    LOG.info("/showarea");

    List<Zona> zonas = zonaService.findAll();

    model.addAttribute("area", zonas.get(0).getNom_ZONA());
    LOG.info("area: " + zonas.get(0).getNom_ZONA());

    return "modal::modalContents";
}

我在我的模型中放置了区域。

第二:我用了一个例子:
https://v4-alpha.getbootstrap.com/components/modal/#modal-components

添加文本。

<button type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#exampleModal">Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel" aria-hidden="true" th:fragment="modalContents">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p th:if="${area != null}" th:text="${area}"/>
                <p th:unless="${area == null}">area == null</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

第三:我在这个文件的末尾添加了一个来自 bootstrap 的简单 javascript 和一个 ajax 函数:

<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var recipient = button.data('whatever'); // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this);
        modal.find('.modal-title').text('New message to ' + recipient);
        modal.find('.modal-body input').val(recipient);

        $.ajax({
            type: 'POST',
            url: "/showarea",
            success: function (data) {
            }
        });
    })
</script>

我从数据库中正确获取了数据，但无法在我的模态 html 页面中显示数据。

更新 1:

无法在我的模式中显示数据。 例如，我添加了

<div class="modal-body" id="areaValue">
    <p id="area" th:if="${area != null}" th:text="${area}"/>
</div>

在 JavaScript 中:

$.ajax({
    type : 'POST',
    url : "/showarea",
    success : function(data) {
           $('#areaValue').html(data);
    }
});

用 firebug 调试我得到模态值，但没有显示!!!

我想显示一个值列表，但无法显示简单的文本...

有什么建议吗？

谢谢

最佳答案

通过阅读您的代码，我了解到您正在进行 AJAX 调用以

• 从数据库中获取值
• 填充 HTML
• 查看模式

您编写的代码在语法上是正确的，但是您在一件事上是错误的...您必须在 ajax 调用的成功方法中填充模态 HTML 在这种情况下，我将按以下方式修改代码(我以 spring mvc 的方式编写它，因为我不是 spring boot 的专家，但您可以将其调整为 springboot 代码):

@RequestMapping(value = "/showarea", method = RequestMethod.POST)
    public @ResponseBody String areaModel() {
        LOG.info("/showarea");

        List<Zona> zonas = zonaService.findAll();


        return  zonas.get(0).getNom_ZONA();
    }


    <button type="button" class="btn btn-primary" data-toggle="modal"
                    data-target="#exampleModal">Launch demo modal</button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalLabel" aria-hidden="true" th:fragment="modalContents">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" id="areaValue">

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary"
                                    data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save
                                    changes</button>
                            </div>
                        </div>
                    </div>
                </div>

    <script>
            $('#exampleModal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget) 
                var recipient = button.data('whatever') 
                var modal = $(this)
                modal.find('.modal-title').text('New message to ' + recipient)
                modal.find('.modal-body input').val(recipient)
                //I would prevent the default behaviour of the button
                event.preventDefault();
                //AJAX Call
                $.ajax({
                    type : 'POST',
                    url : "/showarea",
                    success : function(data) {
                         //Get Area name after AJAX call
                         var nomArea = data;
                         //Valorize HTML
                         $("#areaValue").html(nomeArea);
                         //Finally open popup
                    }
                });
            })
        </script>

希望有用

安杰洛

关于javascript - 将值从 Controller 传递到模态页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46186293/