Question

我是jQuery的新手，我使用了这段代码，但它不起作用：

<script type="text/javascript" src="jquery.js" ></script>
<script>
    $(document).ready(function(){
        $("#add_cl").click(function(){
            $("#formtag").load("main.php");
        });
    });
</script>

点击id="add_cl"想要在main.php加载#formtag的按钮，如ajax。点击它后，它会在Dreamweaver的实时视图中显示main.php页面，但不会显示在Chrome和Firefox中。

Answer 1

我想你正在使用Chrome。您应该使用像Xampp这样的本地服务器来使其在本地工作。或者将其上传到您的在线服务器进行测试。应该工作！
而不是localhost尝试使用：127.0.0.1
由于相同的原始政策或与之相关的内容，Chrome使用AJAX来对抗错误，所以不要生气并使用其他浏览器。 P.S：我使用XAMPP和Chrome，而AJAX的效果非常好。希望它有所帮助

与您的评论相关：
要在同一元素中加载不同的网页，请尝试使用data属性存储您的网址：

<button class="loader" data-loadpage="main.php"> Load main.php </button>
<button class="loader" data-loadpage="about.php"> Load about.php </button>
<button class="loader" data-loadpage="contact.php"> Load contact.php </button>

$(document).ready(function(){
    $(".loader").click(function(){
        $("#formtag").load( $(this).data('loadpage') );
    });
});

另外，您还可以尝试.empty()删除#formtag中的旧内容：
$("#formtag").empty().load( $(this).data('loadpage') );

Answer 2

http://jsfiddle.net/bozdoz/uZ5XS/

HTML：

<span id="load">Click to Load content</span>
<div id="test"></div>
<div id="loadingGif">LOADING GIF!!!!</div>

脚本：

$('#load').click(function() {
    $('#test').html('');
    $('#loadingGif').show();
    $('#test').load('http://fiddle.jshell.net/bozdoz/2XgVd/show/ a', function() {
        $('#loadingGif').hide();
    });
});

Answer 3

回调功能

如果提供“完整”回调，则在后处理和执行HTML插入后执行。对jQuery集合中的每个元素触发一次回调，并依次设置为每个DOM元素。

<script type="text/javascript" src="jquery.js" ></script>
<script>
    $(document).ready(function() {
        $("#add_cl").click(function() {
            $("#formtag").load("main.php", function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    alert(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });
    });
</script>

当您在浏览器上进行测试时，还请检查'main.php'是否仍然与此页面的html位于同一文件夹中？您还可以通过添加回调函数并记录服务器的响应来检查ajax错误

使用jquery在div中加载页面但不起作用

3 个答案: