前台用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. 【JavsScript】webapp的优化整理

    单页or多页 webapp 现状 优劣之分 网络传输优化 综述 fake页-首屏加速 降低请求数 降低请求量 缓存Ajax/localstorage DOM操作优化 综述 关于页面渲染 减少使用定位属 ...

  2. The sound of silence引发的关于互联网以及教育的利弊思考

    “茫茫人海里,人群跟著人群,我们无时无刻不感到孤寂.停下来让我们好好沟通吧,否则人类的关系将日形恶化,沦为新世纪科技的牺牲品” ------- Simon 说实话,我第一次看<毕业生>应该 ...

  3. [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

    In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...

  4. [Ember] Ember.js Templates

    In this lesson, we'll go over some of the basics of Ember.js templates and how they work with contro ...

  5. 三星galaxy s4问题解决及快捷操作

    http://blog.csdn.net/pipisorry/article/details/38474827 三星galaxy s4更改锁屏方式时出现故障 屏幕锁定设置除password以外,其它锁 ...

  6. Oracle中关于清除数据和释放表空间

    一.表的重命名 flashback table test2 to before drop rename to test3;--[to test3]将表重命名 drop table test3 purg ...

  7. J2EE常用包：

    J2EE常用包: java web开发必掌握的javax.servlet : servlet包及支持javax.servlet.http : http请求支持javax.servlet.jsp : 及 ...

  8. Mybatis-Generator 自动生成Dao、Model、Mapping相关文档

    最近在学习mybatis,结果在写Mapping的映射文件时insert语句一直报错,于是想看看标准的映射文件是什么样.百度到Mybatis-Generator 自动生成Dao.Model.Mappi ...

  9. NSTimer定时器的用法

    #import "ViewController.h" @interface ViewController () { NSTimer *countDownTimer; int cou ...

  10. Java基础知识强化之IO流笔记79：NIO之 SocketChannel

    1. Java NIO中的SocketChannel是一个连接到TCP网络套接字的通道.可以通过以下2种方式创建SocketChannel: 打开一个SocketChannel并连接到互联网上的某台服 ...