使用Ajax和Jquery加载内容

我想要在加载页面时将一些内容加载到我的div中，但是随后我想拥有将加载新内容的按钮，并替换当前DIV中的内容。使用Ajax和Jquery加载内容

这是我的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/

我只是想知道我做错了，因为当我想这是我的服务器上它没有加载任何内容。我还想知道是否有更好的方式来实现这样的事情，因为它似乎并不像我可以做任何加载绑定到它。

感谢您给予的任何帮助或建议。

来源

2013-06-28 Jimmy

1）'testlink'！='infolink' 2）加上'event.preventDefault（）'，以确保您的链接不会进入行动 – mishik

请求是否成功？您是否使用Chrome开发者工具或类似工具进行了检查（当然它不工作在jsFiddle，因为这些资源不存在那里） – MasterScrat

确保'load（'/ includes/about-info.html'）'有合适的路径 – cinek

的load方法将只设置第一个匹配元素的HTML如果状态(200 OK) ..如果是除此之外，像(404 Not Found)或(403 Forbidden)，那么它不会将HTML ..

要设置它，无论回应如何，请尝试编辑jsFiddle。

来源

2013-06-28 12:18:03

第一次尝试这样的事：

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

然后你就可以看到正在返回什么。

来源

2013-06-28 12:11:53 Mentok

好吧，那么运行此代码检查什么发生在那里：

<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>

来源

2013-06-28 12:23:40

问题不在于错字.. 。即使使用正确的id名称，当响应不是'200 OK'时它也不会工作。 –

@MiroMarkarian：检查新代码以检查发生了什么。 –

我认为它是与您如何指定负载的URL。试着这么做

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

没有前导 “/”

来源

2013-06-28 12:42:24 PJR

使用Ajax和Jquery加载内容

回答

相关问题