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

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

http://www.dtan.so

CasMenu.aspx页面：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head id="Head1" runat="server">
  5. <title>Porschev--前台JS(Jquery)调用后台方法 级联菜单</title>
  6. <script src="js/jquery-1.3.2-vsdoc.js" mce_src="js/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce:script>
  7. <script type="text/javascript">
  8. $(function() {
  9. $("#selPro").change(function() {    //省份下拉菜单的change事件
  10. var params = '{str:"' + $(this).val() + '"}';  //此处参数名要注意和后台方法参数名要一致
  11. $.ajax({
  12. type: "POST",                   //提交方式
  13. url: "CasMenu.aspx/ShowCity",   //提交的页面/方法名
  14. data: params,                   //参数（如果没有参数：null）
  15. dataType: "text",               //类型
  16. contentType: "application/json; charset=utf-8",
  17. beforeSend: function(XMLHttpRequest) {
  18. $('#tipsDiv').text("正在查询...");
  19. },
  20. success: function(msg) {
  21. $('#tipsDiv').text("查询成功!");
  22. $("#selCity option").each(function() {
  23. $(this).remove();   //移除原有项
  24. });
  25. $("<option value='0'>===请选择===</option>").appendTo("#selCity");   //添加一个默认项
  26. $(eval("(" + msg + ")").d).appendTo("#selCity");        //将返回来的项添加到下拉菜单中
  27. },
  28. error: function(xhr, msg, e) {
  29. alert("error");
  30. }
  31. });
  32. });
  33. });
  34. </script>
  35. </head>
  36. <body>
  37. <form id="form1" runat="server">
  38. <div>
  39. Porschev--前台JS(Jquery)调用后台方法 级联菜单<br />
  40. <br />
  41. <select id="selPro" name="selPro">
  42. <%=strPro %>
  43. </select>省(直辖市)
  44. <select id="selCity" name="selCity">
  45. <option value="0">===请选择===</option>
  46. </select>（市）
  47. </div>
  48. <div id="tipsDiv">
  49. </div>
  50. </form>
  51. </body>
  52. </html>
<%@ 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. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using CasMenuModels;
  8. using CasMenuBLL;
  9. using System.Text;
  10. public partial class _Default : System.Web.UI.Page
  11. {
  12. public static string strPro = string.Empty;  //省份下拉项
  13. public static string strCity = string.Empty;  //城市下拉项
  14. protected void Page_Load(object sender, EventArgs e)
  15. {
  16. if (!IsPostBack)
  17. {
  18. }
  19. ShowPro();
  20. }
  21. #region##省份下拉列表框
  22. /// <summary>
  23. /// 省份下拉列表框
  24. /// </summary>
  25. /// <returns></returns>
  26. public string ShowPro()
  27. {
  28. StringBuilder str = new StringBuilder();        //得到所有省份集合
  29. List<CasMenuModels.Province> list = new CasMenuBLL.ProvinceManager().GetAllProvince();                       //添加一个初始项
  30. str.Append("<option value=\"");
  31. str.Append("0");
  32. str.Append("\">");
  33. str.Append("===请选择===");
  34. str.Append("</option>");
  35. //循环追加省份下拉项
  36. foreach (CasMenuModels.Province p in list)
  37. {
  38. str.Append("<option value=\"");
  39. str.Append(p.ProvinceId);
  40. str.Append("\">");
  41. str.Append(p.ProvinceName);
  42. str.Append("</option>");
  43. }
  44. return strPro = str.ToString();
  45. }
  46. #endregion    #region##城市下拉列表框
  47. /// <summary>
  48. /// 城市下拉列表框
  49. /// </summary>
  50. /// <param name="str">省份ID</param>
  51. /// <returns></returns>
  52. [System.Web.Services.WebMethod()]
  53. public static string ShowCity(string str)   //方法是静态的
  54. {
  55. StringBuilder strCi = new StringBuilder();
  56. if (str == "0")     //为初始项
  57. {
  58. strCi.Append("<option value=\"");
  59. strCi.Append("请选择");
  60. strCi.Append("\">");
  61. strCi.Append("请选择");
  62. strCi.Append("</option>");
  63. }
  64. else
  65. {
  66. List<CasMenuModels.City> list = new CasMenuBLL.CityManager().GetAllByProId(Convert.ToInt32(str));   //根据省份ID得到城市集合
  67. foreach (City c in list)
  68. {
  69. strCi.Append("<option value=\"");
  70. strCi.Append(c.CityId);
  71. strCi.Append("\">");
  72. strCi.Append(c.CityName);
  73. strCi.Append("</option>");
  74. }
  75. }
  76. return strCity = strCi.ToString();
  77. }
  78. #endregion
  79. }
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

前台JS(Jquery)调用后台方法 无刷新级联菜单示例的更多相关文章

  1. AJAX JQuery 调用后台方法返回值（不刷新页面）

    AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () {             //无 ...

  2. jQuery调用后台方法

    前台: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.as ...

  3. <asp:TextBox><asp:LinkButton><input button>调用后台方法后刷新页面

    <asp:TextBox><asp:LinkButton>服务器控件,执行后台方法,会回调加载js,相当于页面重新加载,刷新页面 <input button>不能直 ...

  4. JS前端调用后台方法

    //JS前端代码function Exportqmdltb() { var areavalue= GetQmdltmValue(); $.ajax({ type: "post", ...

  5. jQuery 调用后台方法（net）

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...

  6. JavaScript获取后台C#变量以及调用后台方法

    http://www.educity.cn/develop/495493.html 有时需要在JavaScript中获取后台变量的值,来判断JavaScript的执行逻辑,或者需要调用C#后台方法获取 ...

  7. asp.net如何在前台利用jquery Ajax调用后台方法

    一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...

  8. Asp.net中JQuery、ajax调用后台方法总结

    通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有 ...

  9. js调用后台方法（如果你能容忍执行的后台方法变成一个常量）

    最近一直在做一个电话拨号的系统,系统不大,但是做的时间有点长了.其中用到了一个技术:js调用后台方法.解决这个问题花了不少时间,现如今仍然还有些不明白的地方,今天跟大家分享一下.真正明白的同学欢迎指正 ...

随机推荐

  1. 泛型Dictionary的用法详解

    泛型最常见的用途是泛型集合,命名空间System.Collections.Generic 中包含了一些基于泛型的集合类,使用泛型集合类可以提供更高的类型安全性,还有更高的性能,避免了非泛型集合的重复的 ...

  2. UVA 10025 (13.08.06)

     The ? 1 ? 2 ? ... ? n = k problem  Theproblem Given the following formula, one can set operators '+ ...

  3. window.showModalDialog 与window.open传递参数的不同？

    简单的说,就是一个在弹出窗口之后可以做其它的事,即window.open 另一个在弹出窗口之后不能做其它的事,只能是关闭了当前的窗口之后才能做其它的事,即window.showModalDialog ...

  4. c语言全局变量和局部变量问题汇总

    .局部变量是否能和全局变量重名? 答:能,局部会屏蔽全局.要用全局变量,须要使用"::" 局部变量能够与全局变量同名,在函数内引用这个变量时,会用到同名的局部变量,而不会用到全局变 ...

  5. IOS编程之相机和相册

    概述 IOS设备中的相机和相册,是我们在项目开发中经常会使用到的多媒体元素,使用相机可以获得最新想要的照片,而使用相册则可以访问IOS设备中的图片资源 使用IOS设备中的相机/相册获得图片资源 是否允 ...

  6. LINUX HOOK

    http://blog.csdn.net/yyttiao/article/details/7346287

  7. tar备份工具

    一.tar命令的基本格式 在UNIX.Linux系统中,有许多命令可以用于备份数据,其中最常见的命令是tar命令..tar是UNIX和Linux系统中的打包工具,可以将多个文件或目录打包(也称为归档) ...

  8. sql中的or的用法说明

    数据库里a  c 0  10  20  31  41  51  6这样执行完这语句之后查出来有几条语句? 答案是3条 而我想要的是a为0或1并且c为3的数据显示 应该只有1条的 所以应该这样写 Sql ...

  9. Java元组Tuple使用实例--转载

    原文地址:http://50vip.com/35.html 一.为什么使用元组tuple? 元组和列表list一样,都可能用于数据存储,包含多个数据:但是和列表不同的是:列表只能存储相同的数据类型,而 ...

  10. storm0.9.0.1安装

    storm 0.9.x的好处是引入了netty进行网络传输(需要配置),不用再依赖zeromq和jzmq了 1.下载安装zookeeper ... 2.下载安装storm依赖库 JDK1.6及以上 . ...