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 对象的属性和方法4种不同的类型
Mar 19 Javascript
基于jquery的放大镜效果
May 30 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
基于javascript处理nginx请求过程详解
Jul 07 Javascript
详解实现vue的数据响应式原理
Jan 20 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
简单实用的全选反选按钮例子
2013/10/18 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
浅谈python中set使用
2016/06/30 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
表决心的诗句大全
2014/03/11 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis