前臺(tái)JS(jquery ajax)調(diào)用后臺(tái)方法實(shí)現(xiàn)無刷新級聯(lián)菜單示例

更新時(shí)間：2013年01月10日 18:11:37 作者：

前臺(tái)用AJAX直接調(diào)用后臺(tái)方法，老有人發(fā)帖提問，沒事做個(gè)示例詳細(xì)介紹一下，感興趣的朋友可以參考下

前臺(tái)用AJAX直接調(diào)用后臺(tái)方法，老有人發(fā)帖提問，沒事做個(gè)示例
CasMenu.aspx頁面：

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
<title>Porschev--前臺(tái)JS(Jquery)調(diào)用后臺(tái)方法 級聯(lián)菜單</title> 
<script src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#selPro").change(function() { //省份下拉菜單的change事件 
var params = '{str:"' + $(this).val() + '"}'; //此處參數(shù)名要注意和后臺(tái)方法參數(shù)名要一致 
$.ajax({ 
type: "POST", //提交方式 
url: "CasMenu.aspx/ShowCity", //提交的頁面/方法名 
data: params, //參數(shù)（如果沒有參數(shù)：null） 
dataType: "text", //類型 
contentType: "application/json; charset=utf-8", 
beforeSend: function(XMLHttpRequest) { 
$('#tipsDiv').text("正在查詢..."); 
}, 
success: function(msg) { 
$('#tipsDiv').text("查詢成功!"); 
$("#selCity option").each(function() { 
$(this).remove(); //移除原有項(xiàng) 
}); 
$("<option value='0'>===請選擇===</option>").appendTo("#selCity"); //添加一個(gè)默認(rèn)項(xiàng) 
$(eval("(" + msg + ")").d).appendTo("#selCity"); //將返回來的項(xiàng)添加到下拉菜單中 
}, 
error: function(xhr, msg, e) { 
alert("error"); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
Porschev--前臺(tái)JS(Jquery)調(diào)用后臺(tái)方法 級聯(lián)菜單<br /> 
<br /> 
<select id="selPro" name="selPro"> 
<%=strPro %> 
</select>省(直轄市) 
<select id="selCity" name="selCity"> 
<option value="0">===請選擇===</option> 
</select>（市） 
</div> 
<div id="tipsDiv"> 
</div> 
</form> 
</body> 
</html> 

CasMenu.aspx.cs

復(fù)制代碼代碼如下:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using CasMenuModels; 
using CasMenuBLL; 
using System.Text; 
public partial class _Default : System.Web.UI.Page 
{ 
public static string strPro = string.Empty; //省份下拉項(xiàng) 
public static string strCity = string.Empty; //城市下拉項(xiàng) 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
} 
ShowPro(); 
} 
#region##省份下拉列表框 
///<summary> 
/// 省份下拉列表框 
///</summary> 
///<returns></returns> 
public string ShowPro() 
{ 
StringBuilder str = new StringBuilder(); //得到所有省份集合 
List<CasMenuModels.Province> list = new CasMenuBLL.ProvinceManager().GetAllProvince(); //添加一個(gè)初始項(xiàng) 
str.Append("<option value=\""); 
str.Append("0"); 
str.Append("\">"); 
str.Append("===請選擇==="); 
str.Append("</option>"); 
//循環(huán)追加省份下拉項(xiàng) 
foreach (CasMenuModels.Province p in list) 
{ 
str.Append("<option value=\""); 
str.Append(p.ProvinceId); 
str.Append("\">"); 
str.Append(p.ProvinceName); 
str.Append("</option>"); 
} 
return strPro = str.ToString(); 
} 
#endregion #region##城市下拉列表框 
///<summary> 
/// 城市下拉列表框 
///</summary> 
///<param name="str">省份ID</param> 
///<returns></returns> 
[System.Web.Services.WebMethod()] 
public static string ShowCity(string str) //方法是靜態(tài)的 
{ 
StringBuilder strCi = new StringBuilder(); 
if (str == "0") //為初始項(xiàng) 
{ 
strCi.Append("<option value=\""); 
strCi.Append("請選擇"); 
strCi.Append("\">"); 
strCi.Append("請選擇"); 
strCi.Append("</option>"); 
} 
else 
{ 
List<CasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str)); //根據(jù)省份ID得到城市集合 
foreach (City c in list) 
{ 
strCi.Append("<option value=\""); 
strCi.Append(c.CityId); 
strCi.Append("\">"); 
strCi.Append(c.CityName); 
strCi.Append("</option>"); 
} 
} 
return strCity = strCi.ToString(); 
} 
#endregion 
} 