如何将外部HTML加载到一个DIV中？

Question

我用jQuery创建了一个小代码以将外部HTML文件加载到我的div中，但它无法正常工作，我已经没有更多的想法了。其他任何jQuery代码都可以正常运行。感谢您的帮助：

<div id="zaladuj"> 
load external html file
</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $('#zaladuj').click(function () { 
        $(this).load('s1.htm'); 
    }); 
</script> 

- user2660811

---

你有控制台错误吗？如果在点击监听器中插入console.log，它是否会触发？你确定它能找到s1.php吗？ - Robbie Wxyz

演示: http://jsfiddle.net/jU6c8/ - http://forum.jquery.com/topic/loading-html-from-external-file-into-div :)) - Tats_innit

Answer 1

由于需要等待DOM完全加载，因此您需要将代码包装在jQuery.ready()函数中。

<script type="text/javascript">
    $(document).ready(function(){
        $('#zaladuj').click(function () { 
            $(this).load('s1.htm'); 
        }); 
    });
</script>

- Fouad Fodail

---

谢谢，但它仍然不起作用。这是JS控制台给我的信息：Origin null is not allowed by Access-Control-Allow-Origin. - user2660811

@user2660811 可能你是通过双击脚本来执行它的。尝试使用本地主机或类似的方式通过 Web 服务器调用它。 - Fouad Fodail

Answer 2

<script type="text/javascript"> 
    $('#zaladuj').click(function () { 
        $.ajax({
            context: this,
            dataType : "html",
            url : "s1.htm",
            success : function(results) {
                $(this).html(results);
            }
        });
    }); 
</script> 

- Maciej Treder