從html字符串中獲取div內容---jquery

本文轉載自查看原文 2015-08-30 21:16 3186 load/ asp.net/ html/ ajax/ 【302】jQuery/ jquery/ 【104】Asp.Net

思考的問題：

怎么在一個網頁的div中嵌套另外的網頁（不使用inclue，iframe和frame，不使用他們的原因，include只能嵌套靜態網頁，iframe對網絡爬蟲影響，frame嵌套網頁無法獲取父級頁面信息，不夠靈活）
如果不想嵌套整個網頁怎么辦？（只是嵌套另外頁面的部分內容）

回答（想法）：

使用jquery的ajax函數或者load函數可以獲取網頁內容，從而實現嵌套網頁（獲取到的網頁內容是html字符串）
怎么從字符串中獲取部分內容？

實踐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 xmlns="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#包含 XMLHttpRequest 對象
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 xmlns="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發生改變，我想實現的是點擊菜單，不刷新頁面

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery截取字符串、日期字符串轉Date、獲取html中的純文本 JAVA字符串去掉html代碼，獲取內容 JS 獲取Html字符串中的img標簽替換src內容『轉』給div拼接html 拼接字符串用jQuery向div中添加Html文本內容 jquery獲取

之間的內容.text() 和 .html()區別 [python]獲取網頁中內容為漢字的字符串的判斷 jquery 獲取字符串中的數字 JS正則匹配過濾字符串中的html標簽及html標簽內的內容 PHP 字符串截取()[]{} 中內容