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 相关文章推荐
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
ES6的新特性概览
Mar 10 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
微信小程序实现授权登录
May 15 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
JavaScript原生数组函数实例汇总
Oct 14 Javascript
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分页函数
2006/10/09 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python如何读取文件中图片格式
2020/01/13 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
项目合作协议书
2014/04/16 职场文书
党员三严三实心得体会
2014/10/13 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
电影开国大典观后感
2015/06/04 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
python关于集合的知识案例详解
2021/05/30 Python