Question

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

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

第一：在控制器中查询数据库的简单方法

@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进行调试我以模态获取值，但未显示!!!

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

有什么建议吗？

由于

Answer 1

通过阅读您的代码，我知道您正在进行AJAX调用以便

从DB
填充HTML
查看模式

你编写的代码在语法上是正确的，但你错了一件事......你必须在ajax调用的成功方法中填充模态HTML 在这种情况下，我会按照以下方式修改代码（我以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>

我希望它有用

安吉洛

将值从控制器传递到模态页面

1 个答案: