使用getScript()方法异步加载并执行js文件，jQuery基础(五)一Ajax应用与常用插件教程-慕课网

1-3 使用getScript()方法异步加载并执行js文件

本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用getScript()方法异步加载并执行js文件

使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：

jQuery.getScript(url,[callback])或$.getScript(url,[callback])

参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

例如，点击“加载”按钮，调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件，并在页面中显示加载后的数据内容，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“加载”按钮调用getScript()方法加载服务器中的JavaScript格式文件后，自动执行文件代码，将数据内容显示在<ul>元素中。

任务

我来试试，亲自调用getScript()加载并执行服务器中JavaScript格式的文件。

在下列代码的第24行，使用getScript()方法加载并执行指定服务器路径 http://www.imooc.com/data/sport_f.js 的JavaScript格式文件，根据条件，将数据内容显示在页面中。

index.html style.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用getScript()方法异步加载并执行js文件</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </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);
                    ? {
                        $this.attr("disabled", "true");
                    });
                })
            });
        </script>
    </body>
</html>

#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;
}
ul li
{
    float: left;
    width: 280px;
    height: 23px;
    line-height: 23px;
    padding: 3px 8px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}