jQuery 学习第五课 Ajax 使用说明
jQuery提供了若干个ajax函数，他们大同小异，只是为了处理不同类型的数据而分开来。最简单的是get(url,parameters,callback),这个函数发起一个GET请求，将服务器返回的数据传递给callback处理。 下面的例子实现了当鼠标悬浮在超链接上的时候，就发起一个ajax请求，从服务器端返回关于此超链接的更多介绍的效果。先看服务器端代码，新建一个ajaxload.ashx,仅作为示例，获得查询参数为word的值，并返回：
代码如下:
<%@ WebHandler Language="C#" Class="ajaxload" %>
using System;
using System.Web;
public class ajaxload : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string word = context.Request.Params["word"];
context.Response.Write(string.Format("<p style='color:red;'>More intorduction of {0} is here....</p>",word));
}
public bool IsReusable {
get {
return false;
}
}
}
<head>
<title>Ajax Text</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('a').hover(function(event) {
$.get('ajaxload.ashx', { word: $(event.target).html() }, function(data) {
$('#result').html(data);
});
}, function() {
$('#result').html("");
});
});
</script>
</head>
<body>
<a href="javascript:void(0)">China</a><br />
<a href="javascript:void(0)">USA</a><br />
<a href="javascript:void(0)">Japan</a><br />
<a href="javascript:void(0)">中 国</a><br />
<div id="result">
</div>
</body>
将鼠标依次滑过Japan和中国，在firebug中可以清楚的看到发起了两次get请求。jquery将参数编码后传递给服务器。在jQuery的帮助下，ajax如此简单。
在此例中，服务器端返回了一个html片段，前台所作的工作就是把这个html片段插入到页面中去，实际上，服务器端返回的可以是任何格式的数据，只要在前台做相应的处理即可。在各种数据格式中，尤为常用的是JSON格式。关于JSON格式本身，本文不多做介绍。简单说，JSON格式非常类似于javascript中的对象字面量。{}表示一个对象，[]表示一个数组。
下面来实现一个三级联动下拉菜单。先看下最终效果：
这是一个捆绑销售商品选择器，先选择第一个属性Game，再选择Server，最后选择Amount。服务器端如何从数据库查找到合适的数据并且如何将其序列化成JSON数据不是本文讨论的重点。服务器端能响应如下请求，返回的数据也能看到，这些是JSON的典型格式：
第一个请求返回Game的列表，第二个请求返回Server的列表，第三个稍微复杂一点，返回了很多信息，其中DisplayName是用来显示在列表中的，ID是列表的value值，其余的没有用到。例如：
代码如下:
Amount:<select name="SelectAmount" id="SelectAmount"><option value="45">10 Mil</option>
<option value="46">20 Mil</option></select>
下面介绍前台的实现。下拉列表框的HTML代码如下：
代码如下:
<div id="bannerLivechat_content">
<p>
Game:<select id="SelectGame"></select></p>
<p>
Server:<select id="SelectServer"></select></p>
<p>
Amount:<select id="SelectAmount" name="SelectAmount"></select></p>
<p>
<asp:Button ID="ButtonFasyBuy" CssClass="btn_default" runat="server" Text="BuyNow"
OnClick="ButtonFasyBuy_Click" />
</p>
</div>
为三个下拉列表写好事件处理函数，首先要加载Game列表：
代码如下:
function LoadGame() {
$.getJSON('FastBuy.ashx', function(data) {
var sel = $('#SelectGame')[0];
sel.innerHTML = "";
$.each(data, function(entryIndex, entry) {
var op = new Option(entry);
sel.options.add(op);
});
$('#SelectGame')[0].selectedIndex = 0;
var game = $('#SelectGame').val();
LoadServer(game);
});
}
首先清空当前列表，$.each函数能够遍历第一个参数中的每个值，依次调用第二个参数的函数。并把值传给entry参数。此时jQuery已经把JSON数据解析成javascript对象，这里是一个字符串的数组。 function LoadServer(game) {
代码如下:
$.getJSON('FastBuy.ashx',{Game:game},function(data) {
var sel = $('#SelectServer')[0];
sel.innerHTML = "";
$.each(data, function(entryIndex, entry) {
var op = new Option(entry);
sel.options.add(op);
});
$('#SelectServer')[0].selectedIndex = 0;
LoadAmount(game, $('#SelectServer').val());
});
}
function LoadAmount(game, server) {
$.getJSON('FastBuy.ashx', {Game:game,Server:server}, function(data) {
var sel = $('#SelectAmount')[0];
sel.innerHTML = "";
$.each(data, function(entryIndex, entry) {
var op = new Option(entry['AmountAttr'], entry['ID']);
sel.options.add(op);
});
});
}
最后是加载Amount，这里稍微有一点不同，此时data中的数据不是简单的字符串了，而是一个有属性的对象，可以用entry[‘ID‘]这样的表达式来获取表达式。在这个例子中，entry[‘ID‘]就是一个简单的数字了。当然它完全可以是另一个复杂的对象或者数组，依服务器返回的JSON数据而定。
有了这些准备工作，我们只要在ready函数中为下拉列表注册下处理函数了：
代码如下:
$(document).ready(function() {
$('#SelectServer').change(function() {
LoadAmount($('#SelectGame').val(), $('#SelectServer').val());
});
$('#SelectGame').change(function() {
LoadServer($('#SelectGame').val());
});
LoadGame();
});
至此，一个三级联动下拉单完成了。
jQuery还有一个$.post函数，用法和get一样，只是它发起的是post请求。
相关推荐
-
jQuery 学习第五课 Ajax 使用说明
jQuery提供了若干个ajax函数,他们大同小异,只是为了处理不同类型的数据而分开来.最简单的是get(url,parameters,callback),这个函数发起一个GET请求,将服务器返回的数据传递给callback处理. 下面的例子实现了当鼠标悬浮在超链接上的时候,就发起一个ajax请求,从服务器端返回关于此超链接的更多介绍的效果.先看服务器端代码,新建一个ajaxload.ashx,仅作为示例,获得查询参数为word的值,并返回: 复制代码 代码如下: <%@ WebHandler
-
jQuery 学习第六课 实现一个Ajax的TreeView
最终实现的效果是一个目录文件查看器,如图所示: 其原理是,当用户单击一个目录的时候,将这个目录的路径发送给服务器端,服务器端返回这个目录中的文件和目录信息.在服务器端,定义一个如下的类来表示要传递的文件信息: 复制代码 代码如下: public class FileInformation { public string FullPath { get; set; } public string Name { get; set; } public string Info { get; set; }
-
jQuery 学习第七课 扩展jQuery的功能 插件开发
jQuery的主体如下: (function(){ --})(); 对于Javascript基础不太好好的人来说比较奇怪.实际上,这个表达式声明了一个匿名函数(第一个括号),然后再执行它(第二个括号).在这个函数中,完成了jQuery一系列方法和对象的定义.第24行很关键, 复制代码 代码如下: jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually
-
jQuery学习笔记之Ajax用法实例详解
本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.
-
JavaScript事件学习小结(五）js中事件类型之鼠标事件
相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www
-
Ajax学习笔记---3种Ajax的实现方法【推荐】
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司
-
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr
-
jQuery学习基础知识小结
jQuery学习笔记: jQuery学习 1.基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()------隐藏当前元素 $("p"),hide()-------隐藏所有的p元素 $("#ID").hide()-----隐藏id=ID的元素 $("p.Class")--------隐藏class=Cl
-
jQuery通过deferred对象管理ajax异步
今天跟大家分享一个jquery中的对象-deferred.其实从jQuery 1.5.0版本开始引入的一个新功能----deferred对象.不过可能在实际开发过程中用到的并不多,所以没有太在意. 什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结
-
jQuery学习心得总结(必看篇)
jQuery 对象 •jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象. •jQuery 对象是 jQuery 独有的. •只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法. •约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $ •jQuery 对象中封装了多个 DOM 对象,同时 jQuery 对象是类数组对象 •数组与类数组对象的区别