一、JQuery Ajax load()方法主要用于载入远程HTML文件代码,并插入至DOM中
特别说明:
此方法加载html文件,会过滤掉HTMl、Head、Body标记,对于HTMl中的javascript支持解析,对于CSS也支持解析
load(url, [data], [callback])
概述
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。
参数
url,[data,[callback]]String,Map/String,CallbackV1.0
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
示例2:
一、运行html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="panel panel-danger container"></div>
<script>
$('.container').load('html2.html');
</script>
</body>
</html>
二、动态加载html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/angular.min.js"></script>
<style>
ul > li {
color:red;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in [1,2,3]">{{x}}</li>
</ul>
</div>
<script>
$(function () {
alert(3);
});
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
});
</script>
</body>
</html>
显示结果:
示例
描述:
加载文章侧边栏导航部分至一个无序列表。
HTML 代码:
<b>jQuery Links:</b>
<ul id="links"></ul>
jQuery 代码:
$("#links").load("/Main_Page #p-Getting-Started li");
描述:
加载 feeds.html 文件内容。
jQuery 代码:
$("#feeds").load("feeds.html");
描述:
同上,但是以 POST 形式发送附加参数并在成功时显示信息。
jQuery 代码:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
更多: