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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
js输出列表实现代码
Sep 12 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
javascript数组详解
Oct 22 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
php数组一对一替换实现代码
2012/08/31 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue中activated的用法
2021/01/03 Vue.js
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python中的pack和unpack的使用
2018/03/12 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Django后台admin的使用详解
2019/07/08 Python
Python Selenium截图功能实现代码
2020/04/26 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
初中校园广播稿
2014/02/02 职场文书
英文自荐信常用句子
2014/03/26 职场文书
寒假家长评语大全
2014/04/16 职场文书
珍惜资源的建议书
2014/08/26 职场文书
小石潭记导游词
2015/02/03 职场文书
辞职信标准格式
2015/02/27 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
python自动计算图像数据集的RGB均值
2021/06/18 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis