前端技术分享论坛

标题: ajax请求返回的内容，查找不到对象？ [打印本页]

作者: phpvar 时间: 2013-11-6 17:10
标题: ajax请求返回的内容，查找不到对象？
ajax代码：

$.ajax({
url: 'test.html',
success:function(data){
alert($(data).find(".list")).length;
}
})

复制代码

test.html页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<ul class="list">
<li>第 1 条新闻标题</li>
<li>第 2 条新闻标题</li>
<li>第 3 条新闻标题</li>
<li>第 4 条新闻标题</li>
<li>第 5 条新闻标题</li>
<li>第 6 条新闻标题</li>
<li>第 7 条新闻标题</li>
</ul>
</body>
</html>

复制代码

ajax运行后，length=0, 即无法查找到test.html页面中的.list元素！

alert(data)可看到data包含整个test.html代码（类型string），那为什么会查找不到test.html页面中的.list元素呢？

作者: phpvar 时间: 2013-11-6 17:26
加点调试代码看下:

$.ajax({
url: 'test.html',
success:function(data){

复制代码

通过浏览器调试工具，可以看到$(data)包含9个对象：

看上面截图就明白了，ajax请求返回内容是字符串格式，用$(data)获取到的是经过jquery处理过的nodeList(Dom节点list)，jquery处理方式是：会过滤掉doc文档申明、html、head、body标签，只返回页面中text文本节点、meta、title 标签及body下的所有子节点(这里指ul.list)，也就是说$(data)返回的nodeList中已包含ul.list ，所以$(data).find(".list"))会返回undefined ，正确的写法是：

$.ajax({
url: 'test.html',
success:function(data){
alert($(data).filter(".list")).length;
}
})

复制代码

改成在$(data)对象中过滤查找.list ，这时候的.length就能返回1啦！！

当.list 不在test.html 文档的根节点位置，比如：

<div class="demo">
<ul class="list">
....
</ul>
</div>

复制代码

这里就应该用 $(data).find(".list") 才能查找到对应的元素，原因就是上面说的：ajax请求返回内容的jq对象只会返回body下的所有子节点(这里指.demo)，.list节点是body 子节点.demo的子元素，自然得用.find()方法来查找啦！！

欢迎光临前端技术分享论坛 (https://www.phpvar.com/bbs/)