1.运用load 载入公共文件（比如 网页中的公共head.html, top.html）或者公用的 html 模块
比如base.html 中的内容
<div style="width:100px;height:100px">
<p id="#p1">这是公共部分2</p>
<p id="#p2">这是公共部分1</p>
<div>在main.html 中引用base.html 内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的css 案例</title>
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/normalize/4.2.0/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<div id="id1" style="width:200px;height:200px">
<div>
</body>
<script>
//载入公用节点模板
$(function(){
$("#id1").load("base.html");
});
</script>
<html>- 通过load 方法 加载本地的json 数据
比如 base.json 中的数据
{"id":"1","age":"18","name":"zhangshan"}main.html中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的css 案例</title>
<link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/normalize/4.2.0/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<div id="id1" style="width:200px;height:200px"><div>
</body>
<script>
$(function(){
// 载入json 文件
$("#id1").load("base.json",function(responseTxt,statusTxt,xhr){
// 获取json数据
if(statusTxt=="success")
$json=$("#id1").text();
$obj=$.parseJSON($json);
$.each($obj,function(key,value){
alert("key-"+key+" value-"+value);
});
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
</script>
<html>