jquery抓取网页内容(思考的问题：怎么在一个网页的div中获取部分内容)
优采云 发布时间: 2022-02-24 12:16jquery抓取网页内容(思考的问题：怎么在一个网页的div中获取部分内容)
需要思考的问题：
如何在一个网页的div中嵌套另一个网页（不使用include、iframe和frame，不使用的原因，include只能嵌套静态网页，iframe影响网络爬虫，frame嵌套网页无法获取父页面）信息，不够灵活）如果您不想嵌套整个网页怎么办？（只是嵌套另一个页面的一部分）
答案（想法）：
使用jquery的ajax函数或者load函数可以获取网页的内容，从而实现网页的嵌套（获取的网页内容为html字符串）。如何从字符串中获取部分内容？
练习一：
index.html页面（获取本页内容页面的内容）
1
2
3
4 使用jquery的ajax函数获取网页内容
5
6 div{
7 display: block;
8 }
9
10
11
12
13
14
15
16
17
18 This is index.html;
19
20
21
22
23
24
25
26
27 /*
28 * 使用ajax方式获取网页内容（也可以使用load方式获取）
29 * */
30 //解决方案一
31 function GetPageContent1(url) {
32 $.ajax({
33 type: 'get',
34 url: url,
35 async: true,
36 success: function(html) {
37 $("#content").html(html);
38 },
39 error: function(errorMsg){
40 alert(errorMsg);
41 }
42 })
43 }
44 //解决方案二
45 function GetPageContent2(url){
46 /* 想知道更多的load方法信息，请查阅jquery api */
47 $("#content").load(url);
48 }
49
查看代码
content.html 页面
1
2
3 内容页
4
5
6
7
8 This is Content Page;
9
10
11
12
查看代码
第一个问题到这里就可以解决了，点击获取完整的content.html页面的内容
查看jquery的load方法可以发现load函数其实可以指定网页的内容
练习二：
更改index.html页面的ajax函数的url路径获取content.html页面div的id=container的内容
1
2
3
4 使用jquery的ajax函数获取网页内容
5
6 div{
7 display: block;
8 }
9
10
11
12
13
14
15
16
17
18 This is index.html;
19
20
21
22
23
24
25
26
27 /*
28 * 使用ajax方式获取网页内容（也可以使用load方式获取）
29 * */
30 //解决方案一
31 function GetPageContent1(url) {
32 $.ajax({
33 type: 'get',
34 url: url + ' #container',
35 async: true,
36 success: function(html) {
37 $("#content").html(html);
38 },
39 error: function(errorMsg){
40 alert(errorMsg);
41 }
42 })
43 }
44 //解决方案二
45 function GetPageContent2(url){
46 /* 想知道更多的load方法信息，请查阅jquery api */
47 $("#content").load(url + ' #container');
48 }
49
查看代码
至此我们解决了，文章一开始提出的问题。. . . . . 但这是一个静态页面（html页面），它可以工作吗？
答案是否定的，ajax函数或者load函数获取的页面内容是否收录title标签和两个
这是ajax获取的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 Welcome to Content Page!
17
18
查看代码
我们可以看到，不仅获取到了div的内容，还多了两个div和一个title
上网查了一些资料，有人说用$(html).find("#container").html(); 可以解决，但是实践后还是不行，下面是我的最终解决方案
这是Test1.aspx页面，相当于之前的index.html（是我命名错误，请见谅）
1
2
3 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
6
7
8
9 div{
10 display: block;
11 }
12
13
14
15
16
17
18
19
20
21
22 This is index.html;
23
24
25
26
27
28
29
30
31
32 /*
33 * 使用ajax方式获取网页内容（也可以使用load方式获取）
34 * */
35 //解决方案一
36 function GetPageContent1(url) {
37 $.ajax({
38 type: 'get',
39 //url：直接使用url将会获取到整个网页的内容
40 //url + ' #container'：获取url网页中container容器内的内容
41 url: url + ' #container',
42 async: true,
43 success: function (html) {
44 $("#content").html($(html).find('div[id=container]').html());
45
46 //$("#content").html(html);
47 },
48 error: function(errorMsg) {
49 alert(errorMsg);
50 }
51 });
52 }
53 //解决方案二（缺点是content容器会被两次赋值，如不在加载完成之后的函数中进行数据处理，讲含有title、asp.net隐藏内容等标签）
54 function GetPageContent2(url) {
55 /* 想知道更多的load方法信息，请查阅jquery api */
56 $("#content").load(url + ' #container', '', function (response, status, xhr) {
57 //response#是获取到的所有数据（未被截取），status#状态，成功或者失败，xhr#包含 XMLHttpRequest 对象
58 $("#content").html($(response).find('div[id=container]').html());
59 });
60 }
61
62
查看代码
内容页面.aspx
1
2
3 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5
6
7
8
9
10
11
12 Welcome to Content Page!
13
14
15
16
17
查看代码
注意：如果直接复制代码，请修改jquery文件路径
这里还有一点，为什么不使用母版页
使用母版页，点击菜单会刷新整个页面，使用母版页会导致标签id发生变化。我想要实现的是在不刷新页面的情况下点击菜单。
