使用jQuery中Ajax的封装函数——load()

最新推荐文章于 2021-06-18 13:59:04 发布

jia_彬

最新推荐文章于 2021-06-18 13:59:04 发布

阅读量402

点赞数

分类专栏： jQuery Ajax 文章标签： jQuery Ajax

本文链接：https://blog.csdn.net/jiabin_xu/article/details/80840460

版权

jQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Ajax

5 篇文章 0 订阅

订阅专栏

jQuery中Ajax的封装函数——load()

使用方法

$('选择器').load(URL, [请求数据], [成功后的回调函数])
例如：$('ul').load('search_suggest.php');
含义

向指定的URL发起异步请求；若有请求数据，就是POST请求，否则就是GET请求；获取服务器端返回 HTML 片段响应，设置为当前选定元素的 innerHTML。
使用限制
- 服务器返回的必需是HTML片段；
- 服务器端返回的数据会替换已有数据！
案例演示： 异步加载多个页面完全一样的页头/页尾
- 编写 header.php，只含有页头中的DIV片段
- 编写 footer.php，只含有页尾中的DIV片段
- 编写 index.html，
- 待页面加载完后，异步请求页头，放在 #header 中
- 待页面加载完后，异步请求页尾，放在 #footer 中

<!-- index.html -->

<body>
    <div id="header"></div>
    <div id="main">页面主体内容</div>
    <div id="footer"></div>
</body>
<script>
    //待页面加载完后，异步请求页头和页尾
    $(function(){   //页面加载完成要执行的函数
        $('#header').load('header.php');
        $('#footer').load('footer.php');
    });
</script>

// header.php

<?php
    header('Content-Type: text/html;charset=UTF-8');
?>

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">产品</a></li>
</ul>

// footer.php

<?php
    header('Content-Type: text/html;charset=UTF-8');
?>

<hr>
<p class="copyright">版权所有® 2016 TARENA.COM</p>

注意：服务器端返回的是纯 HTML 片段，无样式，若是需要样式，可在引进该 HTML 片段的html文件中添加即可

如：上述案例中，在 index.html 中为 #header和 #footer 添加样式

缺点

只能处理成功的响应消息！如果服务器端返回了错误的响应消息（如404）该函数不会有任何的提示——没有相关的回调函数！

jia_彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录