前台用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. GLSL实现Image Filter 【转】

    http://blog.csdn.net/a3070173/archive/2008/11/27/3390477.aspx 图像过滤无论是在作图工具还是特效的实现上都时有运用,这里发一些通常会使用到的 ...

  2. opencv china 网站，好1376472449

    http://www.opencvchina.com/thread-1750-1-2.html

  3. [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...

  4. 分享8款绚丽的HTML5/jQuery特效插件

    有几天没有分享前端资源了,今天要向大家分享15款非常给力的HTML5/jQuery特效插件,废话少说,一起来看看. 1.CSS3图片重力感应特效 很酷的一款CSS3模拟重力感应特效,你可以拖动图片来甩 ...

  5. cocos2d win7 安卓环境配置开发

    相关工具 下载 Android SDK 下载和安装 Android NDK版本不要选r9的.用r8e!r9会报错 下载安装JDK版本是 jdk-7u13-windows-x64.exe 下载和安装Cy ...

  6. 淘宝 印风 UDF

    http://blog.csdn.net/zhaiwx1987/article/details/6902623

  7. api 翻译之AsyncTask

    AsyncTask 类的简介: AsyncTask可以使UI线程更合理更简单的使用.这个类允许执行后台操作,而且可以在不使用多线程或handlers的情况下给主线程传输数据. 异步任务 被定义为在后台 ...

  8. oracle数据库例外处理与视图

    pl/sql例外处理 例 当输入编号没有时的例外处理 declare --定义 v_ename emp.ename%type; begin -- select ename into v_ename f ...

  9. jsp中调用getOutputStream()产生冲突

    再用jsp进行图片的生成的时候,例如一些验证码,比例图的时候,在对图片进行输出调用 getOutputStream() 的时候会报该方法已经被调用的冲突. 例如如下的程序: <%@ page c ...

  10. 关于app上页面和js的调试

    不久前折腾了一晚上关于app上的页面和js的调试: 首先得准备几个比较比较常用的工具: 1.chrome(这个都没有你还干啥fe呀) 2.Fiddler(抓包神器,基本也是必备咯) 3.sublime ...