javascript - 使用 Ajax 和 Jquery 加载内容

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

如果状态是..，该load方法只会设置第一个匹配元素的html (200 OK)。如果不是这个，比如(404 Not Found)or (403 Forbidden)，那么它不会设置 html..

要设置它而不考虑响应，请尝试我编辑的这个jsFiddle 。

Answer 2

首先尝试这样的事情：

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

然后您将能够准确地看到返回的内容。

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');
    });
})

没有前导“/”