您的位置：首页 > Web前端 > JQuery

jquery load 的高级应用

2016-08-24 14:55 405 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航