jQuery load()函数不会加载所有内容

时间:2012-10-28 11:56:45

标签: javascript jquery html ajax

我已经讨厌一段时间了。我有一个CMS,我想在我的网站上使用,买我不能使用PHP包括所以我决定使用jquery。我已经完成了所有必要的包含,当我打开网页时,它不会加载所有文件...很少有load()函数加载每个文件。任何解决问题或替代方案的想法?感谢。

<script type="text/javascript">
$(document).ready(function(){  
// find element with ID of "target" and put file contents into it  
$('#welcome-container').load('admin/data/blocks/Slider/Text.html');
$('#slides').load('admin/data/blocks/Slider/Imagini.html');  
$('#acasa-continut').load('admin/data/blocks/Acasa/Continut.html');  
$('#sidebar').load('admin/data/blocks/Sidebar/Continut.html');  
$('#sidebar-v1').load('admin/data/blocks/Sidebar/Video-1.html'); 
$('#sidebar-v2').load('admin/data/blocks/Sidebar/Video-2.html');
$('#principii').load('admin/data/blocks/Despre/Principii.html');
$('#echipa').load('admin/data/blocks/Despre/Echipa.html');
$('#echipament').load('admin/data/blocks/Despre/Echipament.html');
$('#contact-t').load('admin/data/blocks/Contact/Contact.html');
}); 
</script>

我已经使用deloper工具进行了检查,它会在每次刷新时随机提供不同元素上的500内部服务器错误

1 个答案:

答案 0 :(得分:1)

请求复合HTML并将其分发到各种容器的客户端代码将是这样的:

$(document).ready(function(){  
    $.ajax({
        url: 'admin/data/blocks/all/page.html',
        dataType: 'json',
        success: function(data){
            $.each(data, function(i, obj) {
                $('#'+obj.target).html(obj.html);
            });
        }
    });
});

这假定admin/data/blocks/all/page.html是服务器端资源,它将提供以下结构的json编码响应:

[
    { 'target':'welcome-container', 'html':'<div>whatever</div>' },
    { 'target':'slides', 'html':'<div>whatever</div>' },
    { 'target':'acasa-continut', 'html':'<div>whatever</div>' },
    { 'target':'sidebar', 'html':'<div>whatever</div>' },
    { 'target':'sidebar-v1', 'html':'<div>whatever</div>' },
    { 'target':'sidebar-v2', 'html':'<div>whatever</div>' },
    { 'target':'principii', 'html':'<div>whatever</div>' },
    { 'target':'echipa', 'html':'<div>whatever</div>' },
    { 'target':'echipament', 'html':'<div>whatever</div>' },
    { 'target':'contact-t', 'html':'<div>whatever</div>' },
]