JQuery Ajax load()方法

本文介绍了 JQuery 中的 Ajax load 方法,该方法用于从服务器请求 HTML 文件并将其插入到当前页面的 DOM 中。支持 GET 和 POST 请求,并可在加载完成后执行回调函数。文中还提供了具体的示例代码。

一、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");
 });

 

 

 

更多:

AngularJS路由

AngularJS动画(一)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值