4.3.2 用jQuery进行异步加载（2）

2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译人民邮电出版社我要评论(5) 字号：T | T

综合评级：

想读(1) 在读(1) 已读(8) 品书斋鉴(0) 已有10人发表书评

《Ajax实战:实例详解》第4章Ajax开源工具集，讨论支持Ajax的JavaScript库并进一步讲解Prototype、Dojo工具箱、jQuery和DWR库，另外特别介绍了它们给Ajax带来的变化。本小节为大家介绍的是用jQuery进行异步加载。

AD： 2013大数据全球技术峰会低价抢票中

4.3.2 用jQuery进行异步加载（2）

这个方法将从由第一个参数提供的URL处取得一个响应，并且把它插入到封装的DOM元素内。这个函数的第二个参数允许我们传递一个对象，它的属性将作为请求的参数。第三个参数可以用来指定一个在请求完成后执行的回调函数。

首先，我们封装一个DOM元素，它通过CSS选择器div#itemData来定位，是一个用于把加载的食物数据放入其中的空<div>元素。之后，用load()方法，提供一个JSP页面的URL ，它将获取由itemId请求参数指定的食物数据，这个参数是方法的第二个参数提供的。

那个参数的值必须是用于在<select>元素中用户点击的那个option的值。因为<select>元素被设置为chanage句柄的函数上下文，所以可以通过this引用来访问它。我们封装这个引用，并用jQuery的val()方法来获得当前被选中的控件的值。

因为我想要做的就只是给DOM中加载食物数据，所以我们并不需要一个回调函数，省略了load()方法的第三个参数。

这就是全部了。

jQuery拥有许多常用的过程，它们实现了大量的代码，并且允许我们用很少的几行代码来执行它们。这个处理函数调用的JSP页面用了itemId请求参数的值来获取相应食物的信息，并把它格式成HTML显示在页面上。

图4-5展示了在选择电冰箱内的食物后显示的完成页面。其源代码在清单4-6中完整地列了出来。

图4-5 要牛奶吗

代码清单4-6 用jQuery来决定晚饭吃什么

3．讨论

本节为我们介绍了jQuery执行Ajax请求的方法，即load()方法。

jQuery的load()方法，非常适合用来让诸如JSP和PHP这种服务器端的模板语言格式化一小段数据，并把HTML作为响应返回。fetchItemData.jsp文件，以及仿造电子冰箱功能的Java类，可以在本章供下载的源代码中找到。

其他一些重要的jQuery特性，也在这个解决方案中表露出来。例如，我们用了一个ready()句柄来触发代码的执行，这些代码必须在用户能够和页面交互前但在整个DOM构建完成后执行。

我们还看到了val()方法，它返回一个封装的input元素的值。如果有多于一个元素被封装，那么这个方法将返回第一个匹配的元素的值。

在这个解决方案中，我们假设电子冰箱的原始列表是由任何一种服务器端语言通过生成页面而给出，比如，一个JSP模板。这是Web应用的一种普遍做法，但是，为了探索jQuery的Ajax能力，在下一个问题中，就需要在页面加载中动态获取那个列表。

4.3.2 用jQuery进行异步加载（2）相关推荐

4.3.2 用jQuery进行异步加载（1）
4.3.2 用jQuery进行异步加载(1) 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译人民邮电出版社我要评论(0) 字号:T | T 综合评级: 想读(1 ...
Jquery Ztree异步加载树
1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...
JQuery,ajax异步加载selectoption/option/select多选框：
摘要:最近项目中用到了jquery,ajax,由于很长时间没用了,所以这次做花了很多时间,现在记录一下,方便以后回忆: 一:js文件: <script type="text/javas ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
【JQuery】初始化页面当异步加载时构建页面元素的顺序
今日帮同事看JQuery页面初始化的一个问题时,由于自己没怎么了解过JQuery,所以遇到了一点小麻烦,实现的效果就是初始化页面时,默认选中页面里某表格数据集的某行数据,这种问题,在Java\Delp ...
jQuery.treetable使用及异步加载
Usage 1 GitHub 地址 https://github.com/ludo/jquery-treetable/ 2 API 地址 http://ludo.cubicphuse.nl/jquer ...
echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
jq异步实现ajax,用jQuery的AJax实现异步访问、异步加载
本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端, ...

4.3.2 用jQuery进行异步加载（2）

4.3.2 用jQuery进行异步加载（2）

4.3.2 用jQuery进行异步加载（2）相关推荐

最新文章

热门文章