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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
js 编写规范
2010/03/03 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
Python和C/C++交互的几种方法总结
2017/05/11 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python openCV自制绘画板
2020/10/27 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
文明学生事迹材料
2014/01/29 职场文书
趣味游戏活动方案
2014/02/07 职场文书
幼儿园家长寄语
2014/04/02 职场文书
户外宣传策划方案
2014/05/25 职场文书
西游降魔篇观后感
2015/06/15 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python