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 相关文章推荐
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 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模块memcached使用指南
2014/12/08 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
layui表格数据重载
2019/07/27 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python读取excel表格生成erlang数据
2017/08/26 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
详解Python3注释知识点
2019/02/19 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
质量月活动总结
2014/08/26 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
化妆品促销活动总结
2015/05/07 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript