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 09 Javascript
动态加载js文件 document.createElement
Oct 14 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 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连mysql和oracle数据库性能比较
2006/10/09 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
网上抓的一个特效
2007/05/11 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python列表切片用法示例
2017/04/19 Python
python MySQLdb使用教程详解
2018/03/20 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Django URL参数Template反向解析
2020/11/24 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
十佳护士获奖感言
2014/02/18 职场文书
有创意的广告词
2014/03/18 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
改造DE1103三步曲
2022/04/07 无线电