css - ajax无法加载外部图片

Question

我有一个 index.php 页面。它包含一个带有一些链接的导航栏。通过ajax，我做了一个小小的加载过程，这里可以看到一个链接的代码:

$('#link1').click(function(e) {
    e.preventDefault();
    $('#target').fadeOut('fast', function() {
        $('#spinner').fadeIn(1000).delay(2000).fadeOut(1000, function() {
            $.ajax({
                url: 'content/1.php',
                dataType: 'html',
                type: 'GET',
                success: function(html) {
                    $('#target').empty();
                    $('#target').append(html);
                    $('#target').fadeIn('slow');
                }
            });
        });
    });
});                                                                 

您可以看到，外部 php 内容页面 (1.​​php) 将加载到“target”div 中。现在的问题是“1.php”由外部 css 格式化，使用以下代码加载到“1.php”:

<link rel="stylesheet" type="text/css" href="1css/style.css">

但是当我吃 index.php 时，我只看到 1.php 的文本内容，而不是图像。错误在哪里？我可以通过 ajax 为 1.php 加载外部 css 吗？我可以把文件夹发给你，这样你可以更具体地看到它......谢谢......

Answer 1

我相信 ajax 调用只解析 HTML，而不解析样式。您的图片可能不会显示，因为适用于您加载的内容的样式在您加载内容的页面中不存在(或者相对路径不同)。

如果您还需要加载样式，可能值得将相关的 CSS 文件附加到您要加载内容的页面的头部 - 只需确保检查相关文件路径即可。