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 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
vue-cli 关闭热更新操作
Sep 18 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python 创建TCP服务器的方法
2020/07/28 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
无偿献血倡议书
2014/04/14 职场文书
见习报告怎么写
2014/10/31 职场文书
家长对孩子的寄语
2015/02/26 职场文书
行政复议答复书
2015/07/01 职场文书
电台广播稿范文
2015/08/19 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android