jQuery+ajax实现动态执行脚本的方法


Posted in Javascript onJanuary 27, 2015

本文实例讲述了jQuery+ajax实现动态执行脚本的方法。分享给大家供大家参考。具体分析如下:

有时候,在页面初次加载时就取得所需的全部JavaScript也是没有必要的。具体需要取得哪个脚本,要视用户的操作而定。虽然可以在需要时动态地引人<script>标签,但注人所需代码的更优雅的方式则是通过jQueiy直接加载.js文件。

向页面中注人脚本与加载HTML片段一样简单。但在这种情况下,需要使用全局函数 $.getScript(),这个全局函数与它的同辈函数类似,接受一个URL参数以查找脚本文件,参见如下代码:

$(document).ready(function() {

$('#letter-c a').click(function(event) { event.preventDefault();

$.getScript('c.js');

});

});

在前一个例子中,接下来要做的应该是处理结果数据,以便有效地利用加载的文件。然而, 对于一个脚本文件来说,这个过程是自动化;换句话说,脚本会自动执行。
以这种方式取得的脚本会在当前页面的全局环境下执行。这意味着脚本有权访问在全局环境中定义的函数和变量,当然也包括jQuery自身。因而,我们可以模仿JSON的例子来准备脚本代码,以便在脚本执行时将HTML插人到页面中。现在,将以下脚本代码保存到c.js中:

var entries = [

{

"term": "CALAMITY",

"part": "n.",

 

 

"definition": "A more than commonly plain and...

},

{

"term": "CANNIBAL",

"part": "n.",

"definition": "A gastronome of the old school who..."

},

{

"term": "CHILDHOOD",

"part": "n.",

"definition": "The period of human life intermediate..."

}

//省略的内容

];

var html ='';

$.each(entries, function() {

html += '<div class="entry">';

html += '<h3 class="term">' + this.term + '</h3>';

html += '<div class="part">' + this.part + '</div>';

html += '<div class="definition">' + this.definition + '</div>';

html += '</div>';

});

$('#dictionary').html(html);

最后,单击c链接,应该会看到我们预期的结果。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
javascript将异步校验表单改写为同步表单
Jan 27 #Javascript
JavaScript中实现sprintf、printf函数
Jan 27 #Javascript
javascript批量修改文件编码格式的方法
Jan 27 #Javascript
JavaScript中的包装对象介绍
Jan 27 #Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 #Javascript
浅谈JavaScript Math和Number对象
Jan 26 #Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 #Javascript
You might like
php设计模式 Strategy(策略模式)
2011/06/26 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
React中的refs的使用教程
2018/02/13 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
python实现神经网络感知器算法
2017/12/20 Python
快速了解Python相对导入
2018/01/12 Python
python提取xml里面的链接源码详解
2019/10/15 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
2014年安全生产大检查方案
2014/05/13 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
医生个人年终总结
2015/02/28 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers