前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

431人浏览 / 0人评论
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例
CasMenu.aspx页面:
复制代码 代码如下:





Porschev--前台JS(Jquery)调用后台方法 级联菜单


$(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(); //移除原有项
});
$("===请选择===").appendTo("#selCity"); //添加一个默认项
$(eval("(" + msg + ")").d).appendTo("#selCity"); //将返回来的项添加到下拉菜单中
},
error: function(xhr, msg, e) {
alert("error");
}
});
});
});





Porschev--前台JS(Jquery)调用后台方法 级联菜单





省(直辖市)

===请选择===
(市)







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##省份下拉列表框
///
/// 省份下拉列表框
///
///
public string ShowPro()
{
StringBuilder str = new StringBuilder(); //得到所有省份集合
List list = new CasMenuBLL.ProvinceManager().GetAllProvince(); //添加一个初始项
str.Append("

要注意的地方我都有注释,
当然前台调入后台方法远不止这一种,比如还有AJAXPRO也很好用
源码下载

全部评论

晴天下起了小雨
2017-10-01 18:00
很喜欢,果断关注了
wjmyly7336064
2017-10-01 18:00
相当实用,赞美了
橘大佬
2017-10-01 18:00
就是有些细节再到位点就好了…