Asp.Net下，基于Jquery的Ajax二级联动
浏览数：13 /
时间：2015年06月09日
最近做一个项目，要求实现二级联动效果。背景为：通过学院的选择，联动出专业选项。起初想直接用微软的控件实现Ajax效果，但是DropDownList控件会自动触发PostBack，在后台根本就不好控制，所以抛弃这种方案，用Jquery实现Ajax效果。直接上代码，简单直观。
1.前端页面（这里给出页面二级联动示意，分别为两个select）
<select name="xsxy" id="xsxy"> <option>-- 请选择学院名称 --</option> </select> <select name="xszy" id="xszy"> <option>-- 请选择专业名称 --</option> </select>
2.所对应Jquery代码
$(function () { //ajax加载 注意路径,专业的post参数和学院有所不同，注意 $.post("../../handler/XyZyHandler.ashx", { "action": "getxydata" }, function (data, status) { if (status != "success") { $("#xsxy").append("<option>加载学院出错</option>"); } else if (data == "nodata") { $("#xsxy").append("<option>暂时没有数据</option>"); } else { var options = $.parseJSON(data); for (var i = 0; i < options.length; i++) { var option = options[i]; $("#xsxy").append("<option value=‘" + option.opvalue + "‘>" + option.optext + "</option>"); //注意这里的option写法 } } }); //当学院改变时，实现专业的联动 $("#xsxy").change(function () { $.post("../../handler/XyZyHandler.ashx", { "action": "getzydata", "xyid": $(this).val() }, function (data, status) { if (status != "success") { $("#xszy").append("<option>加载专业出错</option>"); } else if (data == "nodata") { $("#xszy").append("<option>暂时没有数据</option>"); } else { $("#xszy").empty(); $("#xszy").append("<option>-- 请选择专业名称 --</option>") var options = $.parseJSON(data); for (var i = 0; i < options.length; i++) { var option = options[i]; $("#xszy").append("<option value=‘" + option.opvalue + "‘>" + option.optext + "</option>"); } } }); });
3.其对应的ashx文件
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request["action"]; Xyzygl xzgl = new Xyzygl(); //处理学院 if (action == "getxydata") { DataTable result = xzgl.Xyzygl_Getxy(); if (result.Rows.Count == 0) { context.Response.Write("nodata"); } else { List<OptionContent> list = new List<OptionContent>(); for (int i = 0; i < result.Rows.Count; i++) { string xymc = result.Rows[i]["xymc"].ToString(); string xyid = result.Rows[i]["xyid"].ToString(); list.Add(new OptionContent() { opvalue = xyid, optext = xymc }); } //这里利用json处理更加的灵活，注意在添加数据的时候要以对象的方式，并且以属性的方式表示数据，这样前台在利用数据时就会更简单 JavaScriptSerializer jss = new JavaScriptSerializer(); context.Response.Write(jss.Serialize(list)); } } else if (action == "getzydata") { string xyid = context.Request["xyid"]; DataTable result = xzgl.Xyzygl_Getzy(xyid); if (result.Rows.Count == 0) { context.Response.Write("nodata"); } else { List<OptionContent> list = new List<OptionContent>(); for (int i = 0; i < result.Rows.Count; i++) { string zymc = result.Rows[i]["zymc"].ToString(); string zyid = result.Rows[i]["zyid"].ToString(); list.Add(new OptionContent() { opvalue = zyid, optext = zymc }); } JavaScriptSerializer jss = new JavaScriptSerializer(); context.Response.Write(jss.Serialize(list)); } } } public bool IsReusable { get { return false; } } public class OptionContent { public string opvalue { get; set; } public string optext { get; set; } } }
说明：
1.这里将学院和专业的处理文件写在一个中，通过post的参数进行判断进行相应处理。
2.将数据结果进行json化，并且将数据结果进行对象的封装，使处理数据时更加的灵活。
3.对象的创建，直接给出属性，偷了懒，其实可以用参数构建对象，然后给出Set和Get方法。
4.前台的取值，通过json进行获取，注意看代码。
5.学院和专业值从数据库中取得，具体细节，这里没有给出，但是读者应该可以了解。
6.$.post中的参数，最好和ashx对应查看郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
