jQuery+ajax怎么样实现无刷新级联菜单示例
2024-02-23 分类： 网站建设
前台用AJAX直接调用后台方法，总是有人发帖提问，下面是做的一个前台用JQUERY，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" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce: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 }
本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！
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" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce: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 }
本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！
本文标题：jQuery+ajax怎么样实现无刷新级联菜单示例
网站链接：https://www.cdcxhl.com/news2/318552.html
成都网站建设公司_创新互联，为您提供网站设计公司、网站排名、外贸建站、商城网站、关键词优化、品牌网站设计
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
猜你还喜欢下面的内容
- 成都网站优化公司网站优化要点有哪些？ 2024-02-23
- 湛江网站制作怎么能够火爆呢？ 2024-02-23
- 怎样算是真正的网站优化？ 2024-02-23
- 律师网站提高营销推广转化率 2024-02-23
- 美国服务器RAID5故障的修复方式 2024-02-23
- 如何让网页加载的速度更快？ 2024-02-23
- 建一个网站多少钱(建一个网站多少钱(做一个网站大概需要多少费用)) 2024-02-23
- 成都网站建设：定制网站建设以更有优势来吸引百度抓取 2024-02-23
- 教你快速打造“准”爆款营销H5 2024-02-23
- 成都制作网站公司设计优化网站内容指的是什么？ 2024-02-23
- 外贸企业成都网站建设的设计方案如何做 2024-02-23
- 申请百度官网认证如何才能成功？ 2024-02-23
- 什么是关键词？优化关键词是什么意思？ 2024-02-23
- 在网站优化时对网站建设的几点要求 2024-02-23
- 定制网站建设要有明确的目标 2024-02-23
- 高端网站建设的网页设计需要注意什么？ 2024-02-23
- 成都网站建设后应该从哪些点优化网站？ 2024-02-23
- 要做就做好，不然就别做 2024-02-23
- 永康外贸网站建设 2024-02-23