前台用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也很好用
以上所述就是本文的全部內容了，希望大家能夠喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
