您的位置:首页 > Web前端 > HTML

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: