前台JS(jquery ajax)調用後台方法實現無重新整理串聯功能表樣本

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前台用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" type="text/javascript"></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也很好用
源碼下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More