Question

我是Codeigniter的新手，我的问题是：我有一个带按钮的引导页面，点击这个按钮，从javascript我做一个ajax调用从db检索一些数据。这些数据应该以弹出窗口显示。到目前为止，我的方法是在主页面中使用弹出窗口的html包含一个页面（php），使用php的“include”，从带有ajax调用的javascript中将数据放入div并使用$（'＃myPopup'）显示。（'show'），但我不确定这是否是最佳方法。另一种方法可以用弹出的html创建一个视图，从javascript我做一个ajax调用我的控制器中的一个方法，从db检索数据并加载视图，这个方法的问题是在ajax调用成功的部分我有整个弹出窗口的HTML，所以如果我把它放在正文之前，每次按下按钮都会在页面末尾添加一个新的弹出窗口。

jQuery.ajax({
type: "POST",
url: "controller/get_informations",
success: function(res) 
        {   
            if (res)
            {
                // with second approach in res I have code of entire html

                $('#popConfiguration').modal('show');
            }
        },
        error: function(xhr, status, error) {
              alert(xhr.responseText);
            }
    });

什么是最好的方法，假设将来我可以有其他7-8弹出窗口？我认为把所有弹出窗口放在主页面上并不是最好的感谢

Answer 1

一切都取决于。你多久打开一次模态（并调用服务器）？谁是您网站的目标？你期望多少流量？

即。如果您的目标是整个世界，并且您希望打开大量流量或大量模态，那么优化这些内容可能至关重要。从这个意义上讲，要求服务器每次都为您提供模板样式是浪费资源。否则，它可能是无害的。

我看到三个选项：

选项1

页面加载时加载的模板
AJaX获取JSON
更新模板上的值并显示

选项2

模板展示
AJaX抓取HTML
更新模式并显示

选项3

第一次模式显示时加载的模板（将模板存储为变量）
AJaX获取JSON
更新模板上的值并显示

前两个选项是你提到的。第三种选择是混合使用两种不同的AJaX进行内容和模板提取。在用户第一次打开模态并存储在变量中供以后使用时，将获取模板。内容从服务器返回为JSON，用于在向用户显示模板之前更新模板。

Answer 2

要将html数据加载到div中，最好的方法是使用GET而不是POST。这样你就可以使用第二种方法将html加载到模型中的内部div（使用视图并将其作为html从控制器返回），然后在load call_back function中显示模态。

HTML

<div id="modal-popup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="detail-section">

        </div>
    </div>
</div>

JS

$('#detail-section').load(your_url_to_controller, function(){
     $('#modal-popup').modal();
});

Answer 3

您可以在主页面中添加所有7-8个弹出窗口，只需替换控制器中的数据

Answer 4

如果您有多个模态，则将所有弹出窗口放入模板并不是一个好方法，因为这会增加页面加载时间。

最好的方法是使用ajax加载弹出窗口内容。如果不希望每个模态开头加载相同的数据，您可以缓存由ajax弹出窗口加载的缓存。 @Rifky的答案显示了基本解决方案。

更好的使用视图或包含PHP在Codeigniter中使用弹出窗口？

4 个答案: