load()方法异步请求数据

最新推荐文章于 2021-06-03 19:49:59 发布

AIYOUWAI哈

最新推荐文章于 2021-06-03 19:49:59 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/qq_41841562/article/details/81010114

版权

在jQuery中对Ajax进行了封装，异步请求的方法共分为三层：

最底层：$.ajax();中间层：$.get()、$.post()、load()；最高层为：$.getScript()、$.getJSON()。

由于第二层的使用效率最高，所以这篇介绍的是load()方法：

使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，能远程载入HTML代码并插入DOM中；结构如下：load(url,[data],[callback])；

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数

为数据请求成功后，执行的回调函数。

点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。

点击“加载”按钮时，先向服务器请求加载一个指定的页面的内容（这个指定的页面可以是自己练习时写的，也可以是后台传来的文件，注意只要把路径改成正确的路径就行）；加载成功后，将内容显示在<div>元素中，并将加载按钮变为不可用。

下面是我写的代码：

效果图是当点击加载按钮i时，会出现我喜欢的水果，并没有通过超链接什么的，而是通过异步请求；

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>用load()方法来加载Ajax</title>
       
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <style type="text/css">
           #divtest
{
    width: 282px;
}
#divtest .title
{
    padding: 8px;
    background-color:Blue;
    color:#fff;
    height: 23px;
    line-height: 23px;
    font-size: 15px;
    font-weight: bold;
}
ul
{
    float: left;
    width: 280px;
    padding: 5px 0px;
    margin: 0px;
    font-size: 14px;
    list-style-type: none;
}
img
{
    margin: 8px;
}
ul li
{
    float: left;
    width: 280px;
    height: 23px;
    line-height: 23px;
    padding: 3px 8px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}
        </style>
   </head>
   <body>
       <div id="divtest">
            <div class="title">
                <span class="fl">我最爱吃的水果</span>
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul></ul>
      </div>

        <script type="text/javascript">

$(function () {

//给加载绑定点击事件

$("#btnShow").bind("click", function () {

var $this = $(this);

将异步请求的结果放在ul标签里

                     $("ul").html("<img src='../img/loading.gif' alt='' />").load("load_1.html",function(){
                        $this.attr("disabled","true");
                     });
//
                });
            });
        </script>
   </body>
</html>
load.html注意的是script标签引入的实际上是jQuery文件，如果自己保存的有，可以使用自己的文件；还有就是图片的路径，注意自己转化。

接下来是load()方法的地址HTML文件：

有哪里写的不清楚的，欢迎评论指出意见。

AIYOUWAI哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
load()方法异步请求数据

在jQuery中对Ajax进行了封装，异步请求的方法共分为三层：最底层：$.ajax();中间层：$.get()、$.post()、load()；最高层为：$.getScript()、$.getJSON()。由于第二层的使用效率最高，所以这篇介绍的是load()方法：使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，能远程载入HTML代码并插入DOM中；结构...
复制链接

扫一扫