AJAX调用页面后台代码方法实现下拉框二级联动效果
这节主要内容是通过AJAX调用页面后台代码方法实现下拉框二级联动效果，实现步骤如下：
1.创建文件Recipe24.aspx,实现后台代码如下 ：
// 引入命名空间
using System.Web.Services;
// 实现下拉框二级联动AJAX请求加载数据方法
[WebMethod()]
public static ArrayList GetSubList( string sBuyID)
{
ArrayList subList = new ArrayList();
if (sBuyID == " 1 " )
{
subList.Add( new ListItem( " 文艺 " , " 1 " ));
subList.Add( new ListItem( " 少儿 " , " 2 " ));
subList.Add( new ListItem( " 人文社科 " , " 3 " ));
subList.Add( new ListItem( " 科技 " , " 4 " ));
}
else if (sBuyID == " 2 " )
{
subList.Add( new ListItem( " 手机通讯 " , " 1 " ));
subList.Add( new ListItem( " 手机配件 " , " 2 " ));
subList.Add( new ListItem( " 摄影摄像 " , " 3 " ));
subList.Add( new ListItem( " 数码配件 " , " 4 " ));
}
return subList;
}
2.实现页面代码(HTML部分)如下：
< body >
< form id ="form1" runat ="server" >
< div align ="center" >
< fieldset style =" 400px; height: 150px;" >
< table border ="0" cellpadding ="10" cellspacing ="10" >
< tr >
< td >
< asp:DropDownList ID ="buyList" runat ="server" Width ="120px" >
< asp:ListItem Value ="0" Text =" --- 请选择 --- " ></ asp:ListItem >
< asp:ListItem Value ="1" Text ="图书" ></ asp:ListItem >
< asp:ListItem Value ="2" Text ="手机数码" ></ asp:ListItem >
</ asp:DropDownList >
</ td >
< td >
< asp:DropDownList ID ="subList" runat ="server" Width ="120px" >
< asp:ListItem Value ="0" Text =" --- 请选择 --- " ></ asp:ListItem >
</ asp:DropDownList >
</ td >
</ tr >
</ table >
</ fieldset >
</ div >
</ form >
</ body >
3.实现脚本代码如下：
< script type ="text/javascript" >
$( function () {
$( " #buyList " ).bind( " keyup change " , function (e) {
e.preventDefault();
// 首先初始化
$( " #subList " ).empty().append($( " <option></option> " ).val( " 0 " ).html( " --- 请选择 --- " ));
if ($( this ).val() != " 0 " ) {
sendData($( this ).val());
}
});
function sendData(sBuyID) {
var loc = window.location.href;
$.ajax({
type: " POST " ,
url: loc + " /GetSubList " , // 调动后台页面方法
data: ' {"sBuyID":" ' + sBuyID + ' "} ' ,
contentType: " application/json; charset=utf-8 " ,
dataType: " json " ,
success: function (msg) {
// msg.d是数组，由后台数组ArrayList返回，因此可以遍历每个元素
$.each(msg.d, function () {
// this.Value和this.Text是后台返回数组ArrayList类型包含元素ListItem类型的属性
$( " #subList " ).append($( " <option></option " ).val( this .Value).html( this .Text));
});
},
error: function () {
alert( " ajax请求发生错误 " );
}
});
}
});
</ script >
4.下拉框二级联动效果图：
5.分析XmlHttpRequest对象，可看到请求响应的数据msg.d的结构如下（通过下图就知道msg.d的每个元素为什么会有Text和Value属性了）：
今天发现一个问题，就是以上代码如果在VS2005建立的项目里面运行，AJAX会报JSON对象错误，但在VS2010项目里面运行正常，一直没找到原因，哪位高手如果知道其原因，请告知，谢谢。
这节我们来看下如何实现AJAX调用页面后台方法和web服务定义的方法，下面通过验证用户的例子，先讲解如何调用页面后台方法，具体实现步骤如下：
1.新建Recipe23.aspx页面。
2.在该页面的后台文件Recipe23.aspx.cs中添加引用
using System.Web.Services;
3.定义静态数组和初始化数据
public static string [] userNameArrray;
protected void Page_Load( object sender, EventArgs e)
{
userNameArrray = new string [ 5 ] { " KenLee01 " , " KenLee02 " , " KenLee03 " , " KenLee04 " , " KenLee05 " };
}
4.定义验证用户名合法性的静态方法
/// <summary>
/// 验证用户是否合法
/// </summary>
/// <remarks>
/// AJAX如果要直接调用该方法，需要添加[WebMethod()]，并定义为静态方法
/// </remarks>
/// <param name="sUserName"> 用户名 </param>
/// <returns> 返回结果 </returns>
[WebMethod()]
public static bool CheckUserName( string sUserName)
{
// 如果用户存在，就验证合法
if (userNameArrray.Contains(sUserName))
{
return true ;
}
return false ;
}
5.在Recipe.aspx里面实现界面结构代码如下
< form id ="form1" runat ="server" >
< div >
< asp:TextBox ID ="txtUserName" runat ="server" ></ asp:TextBox >
< asp:Button ID ="btnCheck" runat ="server" Text ="验证用户" />
</ div >
</ form >
6.在Recipe.aspx里面实现AJAX调用页面后台用户验证方法CheckUserName的脚本代码如下
< script type ="text/javascript" >
$( function () {
$( " #btnCheck " ).click( function (e) {
e.preventDefault();
// 首先判断用户名是否为空，并给出提示
if ($( " #txtUserName " ).val() == "" ) {
alert( " 请输入用户名！ " );
}
else {
sendData($( " #txtUserName " ).val());
}
});
// 定义一个AJAX请求方法
function sendData(sUserName) {
// 访问页面后台方法
var loc = window.location.href;
$.ajax({
type: " POST " ,
url: loc + " /CheckUserName " ,
// sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
// json数据格式是由一对键值构成，如{"name1":"value1", "name2":"value2"}
data: ' { "sUserName": " ' + sUserName + ' "} ' ,
// 发送信息至服务器时内容编码类型
contentType: " application/json; charset=utf-8 " ,
dataType: " json " ,
success: function (msg) {
// AJAX响应被包装到一个d对象里，如{"d":true},
// 因此需要用到msg.d来获取请求返回的布尔值
if (msg.d) {
alert( " 验证用户成功！ " );
}
else {
alert( " 验证用户失败！ " );
}
},
error: function (xhr, textStatus, errorThrown) {
alert( " AJAX错误： " + errorThrown);
}
});
}
});
</ script >
7.运行程序后显示页面如下：
8.输入用户名KenLee10:
9.输入用户名KenLee01:
10.还可以通过Firebug观察AJAX请求响应的数据，请求数据如下：
11.请求响应的JSON数据：
下面再来看下AJAX如何调用Web服务：
1.创建Web服务用户验证的文件UserNameWS.asmx，必须添加[System.Web.Script.Services.ScriptService]，实现用户验证代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// UserNameWS 的摘要说明
/// </summary>
[WebService(Namespace = " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class UserNameWS : System.Web.Services.WebService {
public UserNameWS () {
// 如果使用设计的组件，请取消注释以下行
// InitializeComponent();
}
/// <summary>
/// 验证用户是否合法
/// </summary>
/// <remarks>
/// AJAX如果要直接调用该方法，需要添加[WebMethod()]，并定义为静态方法
/// </remarks>
/// <param name="sUserName"> 用户名 </param>
/// <returns> 返回结果 </returns>
[WebMethod]
public bool CheckUserName( string sUserName)
{
string [] userNameArrray = new string [ 5 ] { " KenLee01 " , " KenLee02 " , " KenLee03 " , " KenLee04 " , " KenLee05 " };
// 如果用户存在，就验证合法
if (userNameArrray.Contains(sUserName))
{
return true ;
}
return false ;
}
}
2.修改Recipe23.aspx的脚本代码sendData函数,只需修改loc访问地址：
// 定义一个AJAX请求方法
function sendData(sUserName) {
// 访问页面后台方法
// var loc = window.location.href;
// 访问Web服务
var loc = "UserNameWS.asmx";
........
简单完成上面两步，就可以直接调用web服务里面定义的方法了。具体显示的效果图，和上面介绍的AJAX访问页面方法的效果图是一样的，这里就不用重复写了。
ASP.NET
ASP.NET相关的技术知识、实用例子、编程技巧等
ASP.NET jQuery 食谱24 (通过AJAX简单实现DropDownList二级联动)
posted @ 2012-02-16 23:50 KenLee 阅读(608) | 评论 (1) 编辑
ASP.NET jQuery 食谱23 (jQuery AJAX实现调用页面后台方法和web服务定义的方法)
posted @ 2012-02-15 00:09 KenLee 阅读(846) | 评论 (1) 编辑
ASP.NET jQuery 食谱22 (jQuery AJAX 基本方法使用和调试技巧)
posted @ 2012-02-14 01:07 KenLee 阅读(975) | 评论 (1) 编辑
ASP.NET jQuery 食谱21 (jQuery各种动画基础效果技巧集合)
posted @ 2012-02-11 23:42 KenLee 阅读(1256) | 评论 (1) 编辑
ASP.NET jQuery 食谱20 (通过jQuery操作Image控件技巧集合)
posted @ 2012-02-08 22:35 KenLee 阅读(1538) | 评论 (8) 编辑
ASP.NET jQuery 食谱19 (通过jQuery操作GridView技巧集合)
posted @ 2012-02-04 22:01 KenLee 阅读(1434) | 评论 (7) 编辑
ASP.NET jQuery 食谱18 (通过使用jQuery validation插件校验DropDownList)
posted @ 2012-01-31 23:23 KenLee 阅读(254) | 评论 (0) 编辑
ASP.NET jQuery 食谱17 (通过使用jQuery validation插件校验ListBox)
posted @ 2012-01-31 23:13 KenLee 阅读(163) | 评论 (0) 编辑
ASP.NET jQuery 食谱16 (通过控件CustomValidator验证RadioButtonList)
posted @ 2012-01-31 23:05 KenLee 阅读(184) | 评论 (0) 编辑
ASP.NET jQuery 食谱15 (通过控件CustomValidator验证CheckBoxList)
posted @ 2012-01-31 23:00 KenLee 阅读(160) | 评论 (0) 编辑
ASP.NET jQuery 食谱14 (在ASP.NET form中校验时间范围)
posted @ 2012-01-31 22:34 KenLee 阅读(184) | 评论 (0) 编辑
ASP.NET jQuery 食谱13 (原创jQuery文本框字符限制插件-TextArea Counter)
posted @ 2012-01-30 22:22 KenLee 阅读(235) | 评论 (0) 编辑
ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
posted @ 2012-01-29 23:01 KenLee 阅读(272) | 评论 (1) 编辑
ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
posted @ 2012-01-19 00:05 KenLee 阅读(392) | 评论 (1) 编辑
ASP.NET jQuery 食谱10 (动态修改hyperlink的URL值)
posted @ 2012-01-16 22:43 KenLee 阅读(275) | 评论 (0) 编辑
ASP.NET jQuery 食谱9 (通过控件hyperlink实现返回顶部效果)
posted @ 2012-01-15 23:51 KenLee 阅读(254) | 评论 (0) 编辑
ASP.NET jQuery 食谱8 (动态添加内容到DropDownList)
posted @ 2012-01-14 19:23 KenLee 阅读(318) | 评论 (0) 编辑
ASP.NET jQuery 食谱7 (从DropDownList获取选择的text和value值)
posted @ 2012-01-14 17:45 KenLee 阅读(252) | 评论 (0) 编辑
ASP.NET jQuery 食谱6 (实现CheckBoxList成员全选或全取消)
posted @ 2012-01-12 21:27 KenLee 阅读(256) | 评论 (0) 编辑
ASP.NET jQuery 食谱5 (显示CheckBoxList成员选中的内容)
posted @ 2012-01-12 21:21 KenLee 阅读(261) | 评论 (0) 编辑
ASP.NET jQuery 食谱4 (复制TextBox的文本到本地剪贴板上)
posted @ 2012-01-11 22:52 KenLee 阅读(225) | 评论 (0) 编辑
ASP.NET jQuery 食谱3 (在TextBox里面阻止复制、剪切和粘贴事件)
posted @ 2012-01-10 00:46 KenLee 阅读(292) | 评论 (0) 编辑
ASP.NET jQuery 食谱2 (表单中使用回车在TextBox之间向下移动)
posted @ 2012-01-08 22:45 KenLee 阅读(336) | 评论 (5) 编辑
ASP.NET jQuery 食谱1 (在TextBox里面创建一个默认提示)
posted @ 2012-01-08 14:24 KenLee 阅读(429) | 评论 (4) 编辑
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于AJAX调用页面后台代码方法实现下拉框二级联动效果的详细内容...