如何将表单数据发送到远程 URL 并在 Bootstrap 模式中显示结果？答案

【问题标题】：How to send form data to remote URL and the result display in Bootstrap modal?如何将表单数据发送到远程 URL 并在 Bootstrap 模式中显示结果？
【发布时间】：2015-08-15 15:02:43
【问题描述】：

我有一个 CakePHP 表单，我希望允许用户显示预览。所以有一个预览提交按钮#btn_submit_preview，当用户单击该按钮时，表单中的数据将被序列化并发送到我的控制器。此控制器保存数据并返回带有预览的 HTML 视图输出：

 $('#btn_submit_preview').click(function (event) {
    var formData = $("#OfferAddForm").serialize();
    $.ajax({
        type: "POST",
        url: "/offers/preview/",
        data: formData,
        success: function (data) {
            $('#content').html(data);
            $('#myModal').modal('show');
        }
    });
    event.preventDefault();
    return false;
});

数据传回页面后，我需要在 Boostrap 模式窗口中显示它们。我有这些用于模态的 HTML 源代码。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="content">
        </div>
    </div>
</div>

问题：我打开“预览”的方式是正确的还是应该做其他事情？我很确定将返回的数据分配回模式窗口 - $('#content').html(data); 也许我应该返回带有预览数据的模式窗口的所有 HTML 源并只打开它......？

【问题讨论】：

这不是打开模态的正确方式。
那么，打开模式的正确方法是什么？谢谢。
创建一个具有数据切换的按钮并隐藏它。之后在你的函数中使用 $('#some_id').click();。记住首先填充所有值然后打开你的模式.检查this
谢谢。我会试试看。官方文档对此有任何支持吗？
我认为通过 JavaScript 打开模式是可以的，你可以在这里看到 - getbootstrap.com/2.3.2/javascript.html#modals

标签： javascript jquery twitter-bootstrap cakephp bootstrap-modal

【解决方案1】：

我认为你现在拥有的一切都很好。我不会返回整个模态的 HTML 源代码，我只是获取电子邮件的 HTML 并将其显示在我的模态上，这有助于实现更好的 IMO 关注点分离。

【讨论】：