jQuery+ajax实现无刷新级联菜单示例

内容摘要
前台用AJAX直接调用后台方法，老有人发帖提问，没事做个示例
下面是做的一个前台用JQUERY，AJAX调用后台方法做的无刷新级联菜单
CasMenu.aspx页面：




<%@ Page Language="C#" Au
文章正文

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

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

CasMenu.aspx页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<%@ 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
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也很好用

以上所述就是本文的全部内容了，希望大家能够喜欢。
代码注释
上一篇C语言借助EasyX实现的生命游戏源码下一篇mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！