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


Posted in Javascript onMay 21, 2015

前台用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   
}

要注意的地方我都有注释,

当然前台调入后台方法远不止这一种,比如还有AJAXPRO也很好用

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
Prototype使用指南之string.js
Jan 10 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
JavaScript之自定义类型
May 04 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
jQuery插件expander实现图片翻转特效
May 21 #Javascript
简单分析javascript面向对象与原型
May 21 #Javascript
jQuery获取上传文件的名称的正则表达式
May 21 #Javascript
js兼容火狐获取图片宽和高的方法
May 21 #Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 #Javascript
javascript去除空格方法小结
May 21 #Javascript
删除javascript所创建子节点的方法
May 21 #Javascript
You might like
长波有什么东西
2021/03/01 无线电
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
详解Python中where()函数的用法
2018/03/27 Python
Python实现ping指定IP的示例
2018/06/04 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python和JavaScript哪个容易上手
2020/06/23 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
毕业生的自我评价分享
2013/12/18 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
质量保证书范本
2014/04/29 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS