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 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
第一个无线电台是由谁发明的
2021/03/01 无线电
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
js网页版计算器的简单实现
2013/07/02 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue实现计算器功能
2020/02/22 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python实现粒子群算法的示例
2021/02/14 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
员工自我鉴定
2013/10/09 职场文书
入职担保书怎么写
2014/05/12 职场文书
教师节主持词开场白
2015/05/29 职场文书
党员转正意见怎么写
2015/06/03 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
详解SQL报错盲注
2022/07/23 SQL Server