标签：
思考的问题：
回答（想法）：
实践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>
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>
这里可以解决第一个问题，点击获取到完整的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>
到这里我们就解决了，文章开始时提出的问题。。。。。。但是这是静态页面（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>
我们可以看到，不仅获取到了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>
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>
注：如直接复制代码，请修改一下jquery文件路径
这里补充一点一下，为什么没有使用母版页
使用母版页，点击菜单会刷新整个网页，而且使用母版页会造成标签id发生改变，我想实现的是点击菜单，不刷新页面
标签：
原文地址：http://www.cnblogs.com/zhizihuakai/p/4771678.html
