在初始页面加载时通过Ajax加载内容的设计模式

Design pattern for loading content via Ajax on initial page load

本文关键字：加载 Ajax 设计模式      更新时间：2023-09-26

在调用ajax启动长时间运行的任务之前，我需要完全渲染一个屏幕。也就是说，在加载报表之前先加载布局，这需要10秒以上的时间（依赖于web服务）。

我可以通过向页面添加一个单独的脚本并在加载该脚本时调用Ajax来实现这一点，但这是最好的设计吗？例如

_myreport.js:

$( document ).ready(function() {
    var report = {
        load: function() {    
            //test for report-container and run Ajax load if it exists
        }
    }
    report.load();
});

我可能有几个页面，我不特别喜欢有多个不同页面的多个脚本。或者，当Ajax调用可能是必需的，也可能不是必需的（容器可能存在，也可能不存在）时，我可能希望在多个页面上重用脚本。我可以在运行Ajax之前检查容器的存在，但对我来说，这不是一个好的设计。我想在需要时调用它，而不是每次页面加载都调用它，然后通过现有的容器测试它是否适用。

我尝试在容器后面的主体中对函数进行一个小调用，但这导致了一个错误，因为report.load()函数尚未定义：

template.phtml

<div id='report-container'></div>
<script>
$( document ).ready(function() {
    report.load();
});
</script>

我可以在多个应用程序中重复使用的常见/标准和干净的方法是什么？

report.load尚未定义，因为它在$（document）.ready中扭曲了。您试图在加载报表容器之后，但在加载整个DOM之前调用它。如果您在$（document）.ready之外声明ajax加载函数，它将是可用的。与对它的调用相同，您在div加载后运行一个脚本，但由于它被封装在$.ready中，所以它没有立即执行，而是等待其余的加载。。。像这样的东西应该工作

 // not wrapped in $( document ).ready 
 var report = {
    load: function() {
        // not sure if you need to test for container, this function is called after it loads
        //run Ajax
    }
 }
<div id='report-container'></div>
<script>
// not wrapped in $( document ).ready 
report.load(); 
</script>
相关文章：