jQuery+ajax实现无刷新级联菜单示例
前台用AJAX直接调用后台方法，老有人发帖提问，没事做个示例
下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单
CasMenu.aspx页面：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="CasMenu.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Porschev--前台JS(Jquery)调用后台方法级联菜单</title>
<scriptsrc="js/jquery-1.3.2-vsdoc.js"mce_src="js/jquery-1.3.2-vsdoc.js"type="text/javascript"></mce:script>
<scripttype="text/javascript">
$(function(){
$("#selPro").change(function(){//省份下拉菜单的change事件
varparams='{str:"'+$(this).val()+'"}';//此处参数名要注意和后台方法参数名要一致
$.ajax({
type:"POST",//提交方式
url:"CasMenu.aspx/ShowCity",//提交的页面/方法名
data:params,//参数（如果没有参数：null）
dataType:"text",//类型
contentType:"application/json;charset=utf-8",
beforeSend:function(XMLHttpRequest){
$('#tipsDiv').text("正在查询...");
},
success:function(msg){
$('#tipsDiv').text("查询成功!");
$("#selCityoption").each(function(){
$(this).remove();//移除原有项
});
$("<optionvalue='0'>===请选择===</option>").appendTo("#selCity");//添加一个默认项
$(eval("("+msg+")").d).appendTo("#selCity");//将返回来的项添加到下拉菜单中
},
error:function(xhr,msg,e){
alert("error");
}
});
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
Porschev--前台JS(Jquery)调用后台方法级联菜单<br/>
<br/>
<selectid="selPro"name="selPro">
<%=strPro%>
</select>省(直辖市)
<selectid="selCity"name="selCity">
<optionvalue="0">===请选择===</option>
</select>（市）
</div>
<divid="tipsDiv">
</div>
</form>
</body>
</html>
CasMenu.aspx.cs
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingCasMenuModels;
usingCasMenuBLL;
usingSystem.Text;
publicpartialclass_Default:System.Web.UI.Page
{
publicstaticstringstrPro=string.Empty;//省份下拉项
publicstaticstringstrCity=string.Empty;//城市下拉项
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
}
ShowPro();
}
#region##省份下拉列表框
///<summary>
///省份下拉列表框
///</summary>
///<returns></returns>
publicstringShowPro()
{
StringBuilderstr=newStringBuilder();//得到所有省份集合
List<CasMenuModels.Province>list=newCasMenuBLL.ProvinceManager().GetAllProvince();//添加一个初始项
str.Append("<optionvalue=\"");
str.Append("0");
str.Append("\">");
str.Append("===请选择===");
str.Append("</option>");
//循环追加省份下拉项
foreach(CasMenuModels.Provincepinlist)
{
str.Append("<optionvalue=\"");
str.Append(p.ProvinceId);
str.Append("\">");
str.Append(p.ProvinceName);
str.Append("</option>");
}
returnstrPro=str.ToString();
}
#endregion#region##城市下拉列表框
///<summary>
///城市下拉列表框
///</summary>
///<paramname="str">省份ID</param>
///<returns></returns>
[System.Web.Services.WebMethod()]
publicstaticstringShowCity(stringstr)//方法是静态的
{
StringBuilderstrCi=newStringBuilder();
if(str=="0")//为初始项
{
strCi.Append("<optionvalue=\"");
strCi.Append("请选择");
strCi.Append("\">");
strCi.Append("请选择");
strCi.Append("</option>");
}
else
{
List<CasMenuModels.City>list=newCasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str));//根据省份ID得到城市集合
foreach(Citycinlist)
{
strCi.Append("<optionvalue=\"");
strCi.Append(c.CityId);
strCi.Append("\">");
strCi.Append(c.CityName);
strCi.Append("</option>");
}
}
returnstrCity=strCi.ToString();
}
#endregion
}
要注意的地方我都有注释，
当然前台调入后台方法远不止这一种，比如还有AJAXPRO也很好用
以上所述就是本文的全部内容了，希望大家能够喜欢。