你的位置:首页 > ASP.net教程

[ASP.net教程]从html字符串中获取div内容


思考的问题:

  1. 怎么在一个网页的div中嵌套另外的网页(不使用inclue,iframe和frame,不使用他们的原因,include只能嵌套静态网页,iframe对网络爬虫影响,frame嵌套网页无法获取父级页面信息,不够灵活)
  2. 如果不想嵌套整个网页怎么办?(只是嵌套另外页面的部分内容)

回答(想法):

  1. 使用jquery的ajax函数或者load函数可以获取网页内容,从而实现嵌套网页(获取到的网页内容是html字符串)
  2. 怎么从字符串中获取部分内容?

实践1:

index.html页面(在这个页面获取content页面的内容)

 1 <html> 2   <head> 3     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4     <title>使用jquery的ajax函数获取网页内容</title> 5     <style type="text/css"> 6       div{ 7         display: block; 8       } 9     </style>10   </head>11   <body>12     <div style="width: 100%; height: 100%;">13       <div id="divTop"></div>14       <div id="divLeft" style="width: 300px; float: left;">15         <input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />16       </div>17       <div id="content" style="width: 500px; float: left;">18         This is index.html;19         20       </div>21       <div id="divBotton"></div>22     </div>23   </body>24 </html>25 <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js" ></script>26 <script type="text/javascript">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 </script>

View Code

content.html页面

 1 <html> 2   <head> 3     <title>内容页</title> 4   </head> 5   <body> 6     <div id="container"> 7       <div style="display: block;width: 200px;height: 200px;background-color: lightgoldenrodyellow;"> 8         This is Content Page; 9       </div>10     </div>11   </body>12 </html>

View Code

这里可以解决第一个问题,点击获取到完整的content.html页面的内容

在查阅jquery的load方法的时候,你可以发现,其实load函数可以网页的指定内容

实践2:

改变index.html页面ajax函数的url路径,获取content.html页面div的id=container的内容

 1 <html> 2   <head> 3     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 4     <title>使用jquery的ajax函数获取网页内容</title> 5     <style type="text/css"> 6       div{ 7         display: block; 8       } 9     </style>10   </head>11   <body>12     <div style="width: 100%; height: 100%;">13       <div id="divTop"></div>14       <div id="divLeft" style="width: 300px; float: left;">15         <input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />16       </div>17       <div id="content" style="width: 500px; float: left;">18         This is index.html;19         20       </div>21       <div id="divBotton"></div>22     </div>23   </body>24 </html>25 <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js" ></script>26 <script type="text/javascript">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 </script>

View Code

到这里我们就解决了,文章开始时提出的问题。。。。。。但是这是静态页面(html页面),在asp.net中适用吗?

答案是不行,无论ajax函数还是load函数获取到的页面内容,都包括title标签和两个asp.net

这是ajax获取到的内容

 1 <title> 2  3 </title> 4  5    6 <div class="aspNetHidden"> 7 <input name="__VIEWSTATE" id="__VIEWSTATE" type="hidden" value="/wEPDwULLTE2MTY2ODcyMjlkZFnC6DYGAeo3UVOfkKoGc1UuBFgx7etuuF2PnttLdzX0"> 8 </div> 9 10 <div class="aspNetHidden">11 12   <input name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" type="hidden" value="D47C80B6">13 </div>14   <div id="container">15     <div style="width: 200px; height: 200px; display: block; background-color: orange;">16       Welcome to Content Page!17     </div>18   </div>

View Code

我们可以看到,不仅获取到了div id="container"的内容而且还多了两个div和一个title

我在网上查了一些资料,有人说使用$(html).find("#container").html();可以解决,实践了一下依然不行,下面是我的最终的解决方案

这个是Test1.aspx页面,相当于之前的index.html(是我命名上的错误,还请见谅)

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="AjaxWeb.GetPageContent.Test1" %> 2  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4  5 <html ="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7   <title></title> 8     <style type="text/css"> 9       div{10         display: block;11       }12     </style>13 </head>14 <body>15   <form id="form1" runat="server">16     <div style="width: 100%; height: 100%;">17       <div id="divTop"></div>18       <div id="divLeft" style="width: 300px; float: left;">19         <input type="button" onclick="GetPageContent2('ContentPage.aspx');" value="获取网页" />20       </div>21       <div id="content" style="width: 500px; float: left;">22         This is index.html;23         24       </div>25       <div id="divBotton"></div>26     </div>27   </form>28 </body>29 </html>30 <script src="../jquery/jquery-1.11.3.min.js" type="text/javascript"></script>31 <script type="text/javascript">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#包含 58       $("#content").html($(response).find('div[id=container]').html());59     });60   }61 62 </script>

View Code

ContentPage.aspx

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="AjaxWeb.GetPageContent.ContentPage" %> 2  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html ="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6   <title></title> 7 </head> 8 <body> 9   <form id="form1" runat="server">10   <div id="container">11     <div style="display: block; width: 200px; height: 200px; background-color:Orange;">12       Welcome to Content Page!13     </div>14   </div>15   </form>16 </body>17 </html>

View Code

注:如直接复制代码,请修改一下jquery文件路径

这里补充一点一下,为什么没有使用母版页

  使用母版页,点击菜单会刷新整个网页,而且使用母版页会造成标签id发生改变,我想实现的是点击菜单,不刷新页面