jQuery 学习第五课 Ajax 使用说明


Posted in Javascript onMay 17, 2010

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如此简单。

jQuery 学习第五课 Ajax 使用说明
在此例中,服务器端返回了一个html片段,前台所作的工作就是把这个html片段插入到页面中去,实际上,服务器端返回的可以是任何格式的数据,只要在前台做相应的处理即可。在各种数据格式中,尤为常用的是JSON格式。关于JSON格式本身,本文不多做介绍。简单说,JSON格式非常类似于javascript中的对象字面量。{}表示一个对象,[]表示一个数组。

下面来实现一个三级联动下拉菜单。先看下最终效果:

jQuery 学习第五课 Ajax 使用说明 

这是一个捆绑销售商品选择器,先选择第一个属性Game,再选择Server,最后选择Amount。服务器端如何从数据库查找到合适的数据并且如何将其序列化成JSON数据不是本文讨论的重点。服务器端能响应如下请求,返回的数据也能看到,这些是JSON的典型格式:

jQuery 学习第五课 Ajax 使用说明 

第一个请求返回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()); 
}); 
}

加载Server数据的过程是类似的。
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请求。
Javascript 相关文章推荐
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
纯JS实现轮播图
Feb 22 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
jQuery实现的立体文字渐变效果
May 17 #Javascript
jQuery实现的类flash菜单效果代码
May 17 #Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 #Javascript
JQuery select标签操作代码段
May 16 #Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
WEB 浏览器兼容 推荐收藏
May 14 #Javascript
You might like
判断PHP数组是否为空的代码
2011/09/08 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP数组函数知识汇总
2016/05/12 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
Python自动化操作实现图例绘制
2020/07/09 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
《雪儿》教学反思
2014/04/17 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
网站出售协议书范文
2014/10/10 职场文书
高一语文教学反思
2016/02/16 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
React中的Context应用场景分析
2021/06/11 Javascript
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Redis命令处理过程源码解析
2022/02/12 Redis
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技