乌徒帮技术范儿技术中心Ajax › jQuery ajax无法获得html返回数据

jQuery ajax无法获得html返回数据

分类:Ajax,jQuery

在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"]

  • MY TITLE
    CONTENT
  • [/code]

    如果直接用$(data) .find('li')就无法获取,而找find('#title')则可取。

    所以下一次记得在你的数据被请求页面外套上一个<div>吧。

    填写个人信息,赶快回复吧!