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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery操作Ajax方法小结

    ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax() 可以不带任何参数直接使用. 注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置. 语法 jQuery.ajax([settings]) 参数

  • 对Jquery中的ajax再封装,简化操作示例

    复制代码 代码如下: <!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>jQueryAja

  • jQuery学习笔记之 Ajax操作篇（一） - 数据加载

    jQuery学习笔记之 Ajax操作篇（一） - 数据加载

    加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: <div></div> <button>load</button> 同目录下的 test.html 文件内容为: <span>test</span> 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $('button').click(function() { $('div').load('test.

  • jQuery学习笔记之 Ajax操作篇（三） - 过程处理

    jQuery学习笔记之 Ajax操作篇（三） - 过程处理

    观察函数 ajaxStart 和 ajaxStop 函数可以用来作为观察函数,我们可以使用观察函数的回调函数来做相应的处理. 当 Ajax 请求开始且尚未进行其他传输时,会触发 ajaxStart 的回调函数. 当最后一次活动请求终止时,则会执行通过 ajaxStop 注册的回调函数. 由于观察函数具备全局性,所以需要使用 $(document) 来调用.我们通过使用 Ajax 方法取得一个图片的例子来测试两个函数: 当前页面为: <div></div> <button>

  • JQuery中使用ajax传输超大数据的解决方法

    直接说问题,在一个页面用了Jquery(1.6)的Ajax请求,用的post,传递显示的数组有500多条.php端却只能接受到50条左右.刚开始以为是web服务器设置的问题,把,max_upload_size这类的都改了.但是没有效果,后来尝试用max_input_vars这个是新玩艺,刚开始还有点作用.后来,客户的数据超过2000的时候,还是一样,php端还是不能完全接受到ajax发送过来的数据.最后,在国外的一网站上,找到了解决方案. 在post发送前,将要发送的变量用JSON.string

  • jquery.ajax之beforeSend方法使用介绍

    常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者"内容加载中..",用来告知用户正在请求数据.这个就可以用beforeSend方法来实现. 下载demo:ajax loading 代码如下: 复制代码 代码如下: function test_ajax(){    $.ajax(    {       type:"GET",//通常会用到两种:GET,POST.默认是:GET       url:"a.php&qu

  • jquery中ajax使用error调试错误的方法

    本文实例讲述了jquery中ajax使用error调试错误的方法.分享给大家供大家参考.具体分析如下: JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息. jquery中ajax的常用用法类似于: $(document).ready(function() { jQuery("#clearCac").click(function() { jQuery.a

  • jQuery中Ajax的get、post等方法详解

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • jquery+ajax+C#实现无刷新操作数据库数据的简单实例

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

  • jQuery中ajax的post()方法用法实例

    本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g

随机推荐