在jQuery中,我们通过ajax的方法获取另一个页面内的数据,使用这些数据作为本页面的局部内容。可是在获取远端HTML数据时,有时我们发现jQuery选择器失效,这是什么原因呢?
我们来看一下jQuery中的ajax方法的基本结构:
[code lang="javascript" line="1"]
$.ajax({
type : 'GET',
url : 'http://' + $domain + '/aoyun/index.html',
dataType : 'html',
beforeSend : function(){
$myTip.text('加载中...');
},
success : function(data){
var $china = {},$chinaData = $(data).find('#forChina table tr.bg td');
$china.jin = $chinaData.eq(1).text();
$china.yin = $chinaData.eq(2).text();
$china.tong = $chinaData.eq(3).text();
$myTip.html('中国:金' + $china.jin + ' 银' + $china.yin + ' 铜' + $china.tong + '');
},
error : function(XMLHttpRequest, textStatus, errorThrown){
//alert(XMLHttpRequest.readyState);
}
});
[/code]
我们关心的是success:function(data)部分。其中返回的data决定着我们这个问题的成败。我们来对比以下两段返回值:
[code lang="php" line="1"]
.....
...
[/code]
在这一段中,我们将#myWant直接放置在body内,再来看下一段
[code lang="php" line="1"]
...
...
[/code]
而在这一段中,我们将#myWant放置在#container内。这两段的区别就在于,我们在ajax的success中用$(data).fin('#myWant')是否可以取到数据,第一段取不到,第二段可以取到。
jQuery中ajax的逻辑就是<body>以外及其直接子节点都是不可被选取的,在success:function(data)中,data为返回的DOM,而利用$(data).find()进行查找时,文档内容(<body>内)的根是不可被选择的。再举一个例子:我们有时直接返回一段HTML代码,如下
[code lang="php" line="1"]
[/code]
如果直接用$(data) .find('li')就无法获取,而找find('#title')则可取。
所以下一次记得在你的数据被请求页面外套上一个<div>吧。