前台JS(Jquery)调用后台方法无刷新级联菜单示例

最新推荐文章于 2021-03-15 13:10:07 发布

老骥伏枥志在千里o

最新推荐文章于 2021-03-15 13:10:07 发布

阅读量1.2k

点赞数

文章标签： jquery ajax

前台用AJAX直接调用后台方法，老有人发帖提问，没事做个示例

下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单

http://www.dtan.so

CasMenu.aspx页面：

[html]view plaincopyprint? 
   
 <%@ 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

[csharp]view plaincopyprint? 
   
 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也很好用

示例下载地址：http://download.csdn.net/source/2758448

转自：http://blog.csdn.net/porschev/article/details/5943579

老骥伏枥志在千里o

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前台JS(Jquery)调用后台方法无刷新级联菜单示例

前台用AJAX直接调用后台方法，老有人发帖提问，没事做个示例下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单 http://www.dtan.soCasMenu.aspx页面： [html] view plaincopyprint?%@ Page Language="C#" Auto
复制链接

扫一扫