Question

我希望在页面加载时将一些内容加载到我的div中，但是我希望有一些按钮可以加载新内容，并替换当前DIV中的内容。

这是我的HTML：

<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>

这是我的Javascript：

$(document).ready(function(){
    $('#aboutlink').click(function(){
        $('#contentbox').load('/includes/about-info.html');
    });
    $('#testlink').click(function(){
        $('#contentbox').load('/includes/test-info.html');
    });
})

http://jsfiddle.net/spadez/GCg4V/1/

我只是想知道我做错了什么，因为当我在服务器上尝试这个时，它没有加载任何内容。我也想知道是否有更好的方法来实现这样的事情，因为我似乎不能对它进行任何加载绑定。

感谢您提供任何帮助或建议。

Answer 1

首先尝试这样的事情：

$.get('/includes/test-info.html', data, function(data){alert(data);})

然后你就能看到确切的回归。

Answer 2

如果状态为load，(200 OK)方法只会设置第一个匹配元素的html。如果不是这样的话，请(404 Not Found)或{{1} }，然后它不会设置html ..

要设置它而不管响应如何，请尝试jsFiddle我编辑过。

Answer 3

好吧然后运行此代码来检查那里发生了什么：

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

<script>    
    $(document).ready(function () {
        $('#aboutlink').click(function () {
            $('#contentbox').load('/includes/about-info.html', function(response, status, xhr){
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });
        $('#infolink').click(function () {
            $('#contentbox').load('/includes/test-info.html', function(response, status, xhr){
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });

    })  
</script>
<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>
<div id="error"></div>

Answer 4

我认为这与你如何指定负载的网址有关。尝试像

这样的东西

$(document).ready(function () {
$('#aboutlink').click(function () {
        $('#contentbox').load('includes/about-info.html');
    });
    $('#infolink').click(function () {
        $('#contentbox').load('includes/test-info.html');
    });
})

没有前导“/”

使用Ajax和Jquery加载内容

4 个答案: