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

要注意的地方我都有注释，

当然前台调入后台方法远不止这一种，比如还有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. getElementById getElementsByName 赋值

      <script type="text/javascript">                            window.onload=function ...

  2. iOS开发——UI篇Swift篇&UIDatePicker

    UIDatePicker //返回按钮事件 @IBAction func backButtonClick() { self.navigationController?.popViewControlle ...

  3. sublime添加ctags实现代码跳转

    本次操作是在sublime text 2下进行. 1.先到http://sublime.wbond.net/Package%20Control.sublime-package下载Package Con ...

  4. java.net.SocketException四大异常解决方案【转】

    java.net.SocketException如何才能更好的使用呢?这个就需要我们先要了解有关这个语言的相关问题.希望大家有所帮助.那么我们就来看看有关java.net.SocketExceptio ...

  5. cocos2d-x jsbinding 在线更新策略设计

    在线更新是用脚本编写游戏逻辑的特有功能,由于脚本语言是边解释边编译的特性,使得游戏在运行的时候可以通过下载最新的脚本来执行游戏逻辑.在不修改Native接口的情况下,在线更新每次更新只需要下载一个(5 ...

  6. C# 网络通信大小端转换类

    本篇文章主要介绍了"C# 网络通信大小端转换类" using System;namespace Framework.NetPackage.Common { /// <summ ...

  7. 记录一次linux线上服务器被黑事件

    1.原因:本来在家正常休息了,我们放在上海托管机房的线上服务器突然蹦了远程不了,服务启动不了,然后让上海机房重启了一次,还是直接挂了,一直到我远程上才行. 2.现象:远程服务器发现出现这类信息 Hi, ...

  8. 解决CSDN的code功能，无法git clone多个项目的问题

    几天前在使用CSDN的git功能的时候发现一个问题:我在CSDN上创建了两个项目,但是却只能git clone其中的一个. 原因: 在添加ssh公钥的时候,将主机上的ssh公钥在CSDN上填的地方不合 ...

  9. 自定义uiview 当没有数据的时候 显示自定义的uiview界面

    // // ZSDTJNoDataView.h // ZSDTJNoDataView // // Created by Mac on 14-12-28. // Copyright (c) 2014年 ...

  10. JSF HelloWord

    JSF(Java Server Faces)是一种用于构建Web应用程序的新标准Java框架.提供了一种以组件为中心来开发Java Web的用户界面的方法,从而简化了开发.   JSF是Java We ...