从html字符串中获取div内容---jquery
思考的问题：
- 怎么在一个网页的div中嵌套另外的网页（不使用inclue，iframe和frame，不使用他们的原因，include只能嵌套静态网页，iframe对网络爬虫影响，frame嵌套网页无法获取父级页面信息，不够灵活）
- 如果不想嵌套整个网页怎么办？（只是嵌套另外页面的部分内容）
回答（想法）：
- 使用jquery的ajax函数或者load函数可以获取网页内容，从而实现嵌套网页（获取到的网页内容是html字符串）
- 怎么从字符串中获取部分内容？
实践1：
index.html页面（在这个页面获取content页面的内容）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>使用jquery的ajax函数获取网页内容</title>
<style type="text/css">
div{
display: block;
}
</style>
</head>
<body>
<div style="width: 100%; height: 100%;">
<div id="divTop"></div>
<div id="divLeft" style="width: 300px; float: left;">
<input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />
</div>
<div id="content" style="width: 500px; float: left;">
This is index.html; </div>
<div id="divBotton"></div>
</div>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
/*
* 使用ajax方式获取网页内容（也可以使用load方式获取）
* */
//解决方案一
function GetPageContent1(url) {
$.ajax({
type: 'get',
url: url,
async: true,
success: function(html) {
$("#content").html(html);
},
error: function(errorMsg){
alert(errorMsg);
}
})
}
//解决方案二
function GetPageContent2(url){
/* 想知道更多的load方法信息，请查阅jquery api */
$("#content").load(url);
}
</script>
content.html页面
<html>
<head>
<title>内容页</title>
</head>
<body>
<div id="container">
<div style="display: block;width: 200px;height: 200px;background-color: lightgoldenrodyellow;">
This is Content Page;
</div>
</div>
</body>
</html>
这里可以解决第一个问题，点击获取到完整的content.html页面的内容
在查阅jquery的load方法的时候，你可以发现，其实load函数可以网页的指定内容
实践2：
改变index.html页面ajax函数的url路径，获取content.html页面div的id=container的内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>使用jquery的ajax函数获取网页内容</title>
<style type="text/css">
div{
display: block;
}
</style>
</head>
<body>
<div style="width: 100%; height: 100%;">
<div id="divTop"></div>
<div id="divLeft" style="width: 300px; float: left;">
<input type="button" onclick="GetPageContent2('content1.html');" value="获取网页" />
</div>
<div id="content" style="width: 500px; float: left;">
This is index.html; </div>
<div id="divBotton"></div>
</div>
</body>
</html>
<script type="text/javascript" src="../jquery/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
/*
* 使用ajax方式获取网页内容（也可以使用load方式获取）
* */
//解决方案一
function GetPageContent1(url) {
$.ajax({
type: 'get',
url: url + ' #container',
async: true,
success: function(html) {
$("#content").html(html);
},
error: function(errorMsg){
alert(errorMsg);
}
})
}
//解决方案二
function GetPageContent2(url){
/* 想知道更多的load方法信息，请查阅jquery api */
$("#content").load(url + ' #container');
}
</script>
到这里我们就解决了，文章开始时提出的问题。。。。。。但是这是静态页面（html页面），在asp.net中适用吗？
答案是不行，无论ajax函数还是load函数获取到的页面内容，都包括title标签和两个asp.net
这是ajax获取到的内容
<title> </title> <div class="aspNetHidden">
<input name="__VIEWSTATE" id="__VIEWSTATE" type="hidden" value="/wEPDwULLTE2MTY2ODcyMjlkZFnC6DYGAeo3UVOfkKoGc1UuBFgx7etuuF2PnttLdzX0">
</div> <div class="aspNetHidden"> <input name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" type="hidden" value="D47C80B6">
</div>
<div id="container">
<div style="width: 200px; height: 200px; display: block; background-color: orange;">
Welcome to Content Page!
</div>
</div>
我们可以看到，不仅获取到了div id="container"的内容而且还多了两个div和一个title
我在网上查了一些资料，有人说使用$(html).find("#container").html();可以解决，实践了一下依然不行，下面是我的最终的解决方案
这个是Test1.aspx页面，相当于之前的index.html（是我命名上的错误，还请见谅）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="AjaxWeb.GetPageContent.Test1" %> <!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 runat="server">
<title></title>
<style type="text/css">
div{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; height: 100%;">
<div id="divTop"></div>
<div id="divLeft" style="width: 300px; float: left;">
<input type="button" onclick="GetPageContent2('ContentPage.aspx');" value="获取网页" />
</div>
<div id="content" style="width: 500px; float: left;">
This is index.html; </div>
<div id="divBotton"></div>
</div>
</form>
</body>
</html>
<script src="../jquery/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* 使用ajax方式获取网页内容（也可以使用load方式获取）
* */
//解决方案一
function GetPageContent1(url) {
$.ajax({
type: 'get',
//url：直接使用url将会获取到整个网页的内容
//url + ' #container'：获取url网页中container容器内的内容
url: url + ' #container',
async: true,
success: function (html) {
$("#content").html($(html).find('div[id=container]').html()); //$("#content").html(html);
},
error: function(errorMsg) {
alert(errorMsg);
}
});
}
//解决方案二（缺点是content容器会被两次赋值，如不在加载完成之后的函数中进行数据处理，讲含有title、asp.net隐藏内容等标签）
function GetPageContent2(url) {
/* 想知道更多的load方法信息，请查阅jquery api */
$("#content").load(url + ' #container', '', function (response, status, xhr) {
//response#是获取到的所有数据（未被截取），status#状态，成功或者失败，xhr#包含 XMLHttpRequest 对象
$("#content").html($(response).find('div[id=container]').html());
});
} </script>
ContentPage.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="AjaxWeb.GetPageContent.ContentPage" %> <!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div style="display: block; width: 200px; height: 200px; background-color:Orange;">
Welcome to Content Page!
</div>
</div>
</form>
</body>
</html>
注：如直接复制代码，请修改一下jquery文件路径
这里补充一点一下，为什么没有使用母版页
使用母版页，点击菜单会刷新整个网页，而且使用母版页会造成标签id发生改变，我想实现的是点击菜单，不刷新页面
从html字符串中获取div内容---jquery的更多相关文章
- 修改字符串中特定的内容，用于OpenRecovery Script
下面的是实例内容 目标是把OpenRecovery Script输入的内容进行修改 当有下面的输入:(作用是安装/emmc目录下面的update-signed.zip 刷机包) install /em ...
- 从字符串中获取XML节点数据
从字符串中获取XML节点数据,前一篇<字符串创建XML文档> http://www.cnblogs.com/insus/p/3298579.html 是储存为一个XML文档.现在,Insu ...
- bat批处理 查找替换：批处理如何查找并替换文本里特定字符串中的部分内容
批处理如何查找并替换文本里特定字符串中的部分内容 摘自:http://www.bathome.net/thread-43349-1-1.html 脚本如下: @if()==() echo off &a ...
- list 分批导入db, 每1000条数据一批 , 从字符串中获取数字,小数, 版本号比较
//这个有个弊端: 分组后分批导入, 是阻塞的,我没有导入完成,别人就不能导入, 这里可以优化成异步,线程池 public static void main(String[] args) { Rand ...
- Javasrcipt中从一个url或者从一个字符串中获取参数值得方法
从url中获取参数值是che程序开发过程中的常用需求,偶然得闲,便抽空研究了一下javasrcipt下,获取参数的办法(JAVA中也类似). 首先看url的规范: URL组成:protocol :// ...
- mssql sqlserver 从指定字符串中获取数字的方法
转自:http://www.maomao365.com/?p=6410 摘要: 下文主要分享从指定字符串或列中获取数字信息,如下所示: 实验环境:sql server 2000 ----编写sql函数 ...
- 在 cell 中获取 textFlied内容的使用
当您读到这里时,建议先下载demo,不懂再参考博客.在iOS项目开发中,容易遇到各种个人信息填写.比如微信中设置个人信息,等.这种方式是进行控制器跳转,代理或者block传值,这种比较容易,符合常规的 ...
- php通过正则从字符串中获取所有图片url地址
/** * 提取字符串中图片url地址 * @param type $str * @return type */ function getimgs($str) { $reg = '/((http|ht ...
- oracle 替换字符串中指定位置内容
1.情景展示 返回服务器的身份证号需要进行加密:只保留前四位和后四位,中间使用*代替,如何实现? 2.解决方案 第一步:查看该表的身份证号的长度有几种类型: 第二步:编写sql 错误方式: 长度为 ...
随机推荐
- 运行批处理bat文件不出现黑框
.bat批处理文件运行时的cmd窗口是无法隐藏的,如果必须隐藏,需要采取间接的方法: 使用bat转exe的软件,有些软件可以在转换过程中让程序在后台运行: 使用vbs来运行bat,代码如下: DIM ...
- 转：DDR3详解（以Micron MT41J128M8 1Gb DDR3 SDRAM为例）之一
转载来自:http://blog.csdn.net/shanghaiqianlun/article/details/6976804 作者:shanghaiqianlun的专栏 1．结构框图: 2．管脚 ...
- [JavaScript] JavaScript作用域深度解析
JavaScript作用域 JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里. -- JS权威指南 在JS里,一切皆对象,函数也是. 一.有什么用 什么时候会用到它? ...
- 单片机设计与KeilC编程总结
1基本原则 质量是关键.没有人会对很差的工作感到满足.当完成高质量的工作时,你会为此而感到骄傲.不管你是否知道,你都会因为你的高质量工作而得到信誉.因此,要想为自己所做的事感到骄傲,就需要建立个 ...
- use "man rsyslogd" for details. To run rsyslog interactively, use "rsyslogd -n"to run it in debug mo
zjtest7-frontend:/root# service rsyslog start Starting system logger: usage: rsyslogd [options] use ...
- 【转】java读写二进制文件的解决方法
原文网址:http://www.jb51.net/article/36940.htm 接口:Writerable 复制代码代码如下: package com.geoway.pad.common; im ...
- linux内核链表的移植与使用
一. Linux内核链表为双向循环链表,和数据结构中所学链表类似,具体不再细讲.由于在内核中所实现的函数十分经典,所以移植出来方便后期应用程序中的使用. /********************* ...
- codevs1906 最长递增子序列问题
题目描述 Description 给定正整数序列x1,..... , xn .(1)计算其最长递增子序列的长度s.(2)计算从给定的序列中最多可取出多少个长度为s的递增子序列.(3)如果允许在取出的 ...
- HDU-1047（DP-二进制状态压缩）
Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot of h ...
- python+mysql数据库的简单操作
最近接了一个任务,测试某项类似于收益情况报表的功能,因计算公式复杂,单纯手算过于复杂,所以想到写成脚本 根据python的分治原则,先整了几个函数用于实现计算逻辑,后发现数据输入过于繁琐,所以决定使用 ...