ajax简单html页面内容获取
2016-05-30 16:07
387 查看
代码:
page.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table class="tb" border="1">
<tr><td class="tdr">HTML语言</td><td >jquery语言</td></tr>
<tr><td >c语言</td><td >js语言</td></tr>
</table>
</body>
</html>
Untitled.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#showPage').click(function(){
$.ajax({
url:"page.html",
dataType:"html",
type:"get",
beforeSend: function(){
$('#showPage').attr('dis','1');
},
success: function(result){
$('#showArea').html(result);
},
complete:function(){
$('#showPage').removeAttr('dis');
},
});
});
});
</script>
</head>
<body>
<div id="showArea" class="showDiv" style="width:300px;height:300px;background-color:#cccccc;"></div>
<P><a id="showPage" href="javascript:void(0);">读取html页面</a></P>
</body>
</html>
结果:
page.html
Untitled.html
page.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table class="tb" border="1">
<tr><td class="tdr">HTML语言</td><td >jquery语言</td></tr>
<tr><td >c语言</td><td >js语言</td></tr>
</table>
</body>
</html>
Untitled.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#showPage').click(function(){
$.ajax({
url:"page.html",
dataType:"html",
type:"get",
beforeSend: function(){
$('#showPage').attr('dis','1');
},
success: function(result){
$('#showArea').html(result);
},
complete:function(){
$('#showPage').removeAttr('dis');
},
});
});
});
</script>
</head>
<body>
<div id="showArea" class="showDiv" style="width:300px;height:300px;background-color:#cccccc;"></div>
<P><a id="showPage" href="javascript:void(0);">读取html页面</a></P>
</body>
</html>
结果:
page.html
Untitled.html
相关文章推荐
- HTML 5 Web 存储
- HTML开发过程个人心得与小技巧
- HTML基础一:基本元素
- HTML特殊字符编码大全
- 举例讲解HTML中iframe和frame的区别
- 聊一聊HTML <pre>标签
- HTML杂谈
- htmlToPDF by Pechkin ,Web项目使用时64位锁死,其他没问题
- wkhtmltopdf参数设置和下载PDF
- html文字有光晕
- html文字有光晕
- html实现滚动效果
- HTML中字体单位px pt em之间的转换
- HTML中有关表格的基本属性知识
- 代码验证浏览器是否支持html audio 和video
- HTML中有关表格的基本属性知识
- HTML自学基础
- HTML中有关表格的基本属性知识
- HTML中有关表格的基本属性知识
- 代码验证浏览器是否支持html audio 和video