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代码
Oct 30 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
node.js 微信开发之定时获取access_token
Feb 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概率算法实例
2014/04/09 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python dict 相同key 合并value的实例
2019/01/21 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
python SOCKET编程基础入门
2021/02/27 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
员工工作表扬信范文
2014/01/13 职场文书
英语教研活动总结
2014/07/02 职场文书
科学发展观活动总结
2014/08/28 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
MySQL分区路径子分区再分区
2022/04/13 MySQL