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

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

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

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

 <!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>

         <style>

             #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;

             }

         </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);

                     $.getScript("./sport.js",function(){

                         $this.attr("disabled", "true");

                     });

                 })

             });

         </script>

     </body>

 </html>
 var data = [{

         "name":"足球"

     },{

         "name":"篮球"

     },{

         "name":"乒乓球"

     },{

         "name":"排球"

 }];

 $.each(data,function(index,sport){

     $("ul").append("<li>"+sport['name']+"</li>");

 });

使用getScript()方法异步加载并执行js文件的更多相关文章

  1. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery. ...

  2. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  3. JQuery文档加载完成执行js的几种方法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  4. 动态加载CSS，JS文件

    var Head = document.getElementsByTagName('head')[0],style = document.createElement('style'); //文件全部加 ...

  5. 脚本加载后执行JS回调函数的方法

    动态脚本简单示例 // IE下: var HEAD = document.getElementsByTagName('head')[0] || document.documentElement var ...

  6. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

  7. 火狐浏览器怎么查看页面加载了那些js文件，那系js文件有作用

    方法一: 右击查看原代码,点击js链接如果能够看到文件内容,证明加载成功 方法二: 按F12键,如果控制台没有加载错误,证明加载成功:

  8. .NET Web后台动态加载Css、JS 文件，换肤方案

    后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...

  9. JavaScript动态加载CSS和JS文件

    var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argumen ...

随机推荐

  1. <linux下sysctl指令详解>

    Sysctl指令是对系统核心参数的设置: 用法: -a 参数列出系统中所有核心设置 当然了这些核心的设置都是文件,存放于/proc/sys/net目录下. 举个有代表性的例子: net.ipv4.ic ...

  2. WP开发笔记——WP7 SDK使用技巧

    俗话说的好,工欲善其事,必先利其器. 入门WP开发之前,免不了要先接触开发环境和开发工具.使用WP7 SDK进行开发,我们需要掌握SDK的一些实用技巧,以便我们的开发. 一.开启/关闭电脑键盘输入 W ...

  3. NSS_05 数据访问选型

    在数据访问层上很想用orm框架, 选用Nhibernate或ef, 可以直接操作类对象, 避免转换, 更加的面向对象,更重要的是开发起来就方便多了. 但是从网上了解到这些框架太高级了, 用得不好到时会 ...

  4. ECMAScript整理笔记(持续更新....)

    参考文献: ECMAScript Array:http://www.jimmycuadra.com/posts/ecmascript-5-array-methods ECMAScript5兼容展示大全 ...

  5. 【Qt】Qt实战一二三【转】

    简介 “我们来自Qt分享&&交流,我们来自Qt Quick分享&&交流”,不管你是笑了,还是笑了,反正我们是认真的.我们就是要找寻一种Hold不住的状态,来开始每一天的 ...

  6. openerp学习笔记 计算字段、关联字段（7.0中非计算字段、关联字段只读时无法修改保存的问题暂未解决）

    计算字段.关联字段,对象修改时自动变更保存(当 store=True 时),当 store=False 时,默认不支持过滤和分组7.0中非计算字段.关联字段只读时无法修改保存的问题暂未解决 示例代码: ...

  7. 忘记linux root密码怎么办？

    摘自:<鸟哥的Linux私房菜> 常常有些朋友在配置好了Linux之后,结果root密码给他忘记去!要重新安装吗?不需要的, 你只要以单人维护模式登陆即可更改你的root密码喔!由于lil ...

  8. Zendframework application 引导过程

    Applications 会期望用户提供一个配置好的ServiceManager.提供以下服务: 1.EventManager 2.ModuleManager 3.Request 4.Response ...

  9. 【js】undefined

    alert(a); function name(parameters) { alert(parameters); } var a; name(a); ---输出结果--- underfind unde ...

  10. Aspose 数字和日期 设置

    Microsoft Excel一个非常强大的功能就是使客户可以设置数字和日期的显示格式,众所周知数字可以显示为不同的值格式,包含:小数.货币.百分数.分数.账面价值等,同样地Aspose.Cells也 ...