jquery ajax加载某些div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5611746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ajax load certain div
提问by Yovo
my question is very simple how can I retrieve certain div with jquery ajax comand
我的问题很简单，如何使用 jquery ajax 命令检索某些 div
$.ajax({
url: "test.html",
success: function(){
$(this).addClass("done");
}
});
like with load
喜欢负载
$('#targetDiv').load('http://localhost/test.html #sourceDiv');
回答by Darin Dimitrov
If the div is part of the AJAX response:
如果 div 是 AJAX 响应的一部分：
$.ajax({
url: 'test.html',
dataType: 'html',
success: function(html) {
var div = $('#sourceDiv', $(html)).addClass('done');
$('#targetDiv').html(div);
}
});
回答by Nicky Waites
Here is a slightly different take on it. Also your target div maybe hidden by default so I've added in a Fade In affect to show it. If your html is going to change then you might want to add in a cache: false.
这是一个略有不同的看法。此外，您的目标 div 可能默认隐藏，所以我添加了淡入效果来显示它。如果您的 html 将要更改，那么您可能需要添加缓存：false。
$.ajax({
url: "html.htm",
type: "GET",
dataType: "html",
success: function (res) {
$("#targetDiv").html($(res).find("#sourceDiv")
.addClass('done'))
.fadeIn('slow');
}
});
If you're interested you can take a look at how jQuery does the load method here jQuery Source Viewer
如果您有兴趣，可以在jQuery Source Viewer 中查看 jQuery如何执行加载方法
回答by probie
Here is an example that I use on my site for the navigation.
这是我在我的网站上用于导航的示例。
<ul id="nav">
<li><a name="portfolio" href="portfolio.php" class="ajax_nav">PORTFOLIO</a></li>
<li><a name="biography" href="biography.php" class="ajax_nav">BIOGRAPHY</a></li>
</ul>
For the javascript you can try this.
对于 javascript 你可以试试这个。
var hash = window.location.hash.substr(1);
var hash2 = window.location.hash.substr(1);
// Menu items to lower main content
var href = $('.ajax_nav').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.html #ajax_content';
$('#ajax_content').load(toLoad)
}
});
// For inner overlay of featured content.
var href2 = $('.feat_item_link').each(function(){
var href2 = $(this).attr('href');
if(hash2==href2.substr(0,href.length-4)){
var toLoadFeatured = hash2+'.html #ajax_featured_content';
$('#ajax_featured_content').load(toLoadFeatured);
}
});
// For Bottom Navigation
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #ajax_content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function loadContent() {
$('#content').delay(1000).load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').delay(1000).fadeOut('normal');
}
return false;
});
The id of #load simply uses an animated gif in the CSS.
#load 的 id 只是在 CSS 中使用动画 gif。
Place the javascript in the $(document).ready() and you should be all set.
将 javascript 放在 $(document).ready() 中，您应该已经设置好了。
