前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例
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--前台JS(jquery)调用后台方法 级联菜单</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() + '"}'; //此处参数名要注意和后台方法参数名要一致
$.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("查询成功!");
$("#selCity option").each(function() {
$(this).remove(); //移除原有项
});
$("<option value='0'>===请选择===</option>").appendTo("#selCity"); //添加一个默认项
$(eval("(" + msg + ")").d).appendTo("#selCity"); //将返回来的项添加到下拉菜单中
},
error: function(xhr, msg, e) {
alert("error");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Porschev--前台JS(Jquery)调用后台方法 级联菜单<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
复制代码 代码如下:

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; //省份下拉项
public static string strCity = string.Empty; //城市下拉项
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(); //添加一个初始项
str.Append("<option value=\"");
str.Append("0");
str.Append("\">");
str.Append("===请选择===");
str.Append("</option>");
//循环追加省份下拉项
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) //方法是静态的
{
StringBuilder strCi = new StringBuilder();
if (str == "0") //为初始项
{
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)); //根据省份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
}

要注意的地方我都有注释,
当然前台调入后台方法远不止这一种,比如还有AJAxpRO也很好用
源码下载

脚本宝典总结

以上是脚本宝典为你收集整理的前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例全部内容,希望文章能够帮你解决前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。