前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
更新时间：2021年9月22日 10:17 点击：1507
前台用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也很好用
源码下载
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也很好用
源码下载
下一篇: .NET中的 类型转换深入理解
相关文章
php无刷新利用iframe实现页面无刷新上传文件(1/2)
利用form表单的target属性和iframe 一、上传文件的一个php教程方法。 该方法接受一个$file参数，该参数为从客户端获取的$_files变量，返回重新命名后的文件名，如果上传失...2016-11-25jQuery+PHP发布的内容进行无刷新分页（Fckeditor）
这篇文章将使用jQuery，并结合PHP，将Fckeditor发布的内容进行分页，并且实现无刷新切换页面。 本文假设你是WEB开发人员，掌握了jQuery和PHP相关知识，并且熟知Fckeditor的配置和使用。...2015-10-23- 本文就是和大家分享一款由php结合ajax实现的无刷新留言板，先给大家看一下最后的效果图：数据库连接代码如下： <?php$conn = @mysql_connect("localhost","root","root") or die ("MySql连接错误");mysql_select_db("d...2015-10-30
- 这篇文章主要介绍了基于jquery实现表格无刷新分页，功能实现了前端排序功能，增加了前端搜索功能，感兴趣的小伙伴们可以参考一下...2016-01-08
- <!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/1...2016-11-25
- 其它原理很简单，利用form表单的target属性和iframe来实现的，打开为iframe试就行了，返回就利用js判断php教程运行后返回的参数是不是成功 一、上传文件的一个php方法。...2016-11-25
- iframe无刷新文件上传其实就是在当前页面打开了上传程序的页面，有点像ajax局部刷新一个，只是我们把它放到了iframe页面中上传，同时我们把iframe页面给隐藏了。 一个...2016-11-25
- 本文章简单的介绍了二种关于php ajax实现无刷新检测用户名是否可用，有我是利用了jquery的$.ajax来实例，有需要的朋友可以参考一下本实例。 前 言...2016-11-25
- 本文介绍了一款无刷新的新闻留言系统，最简明易懂的一个ajax无刷新留言系统，源码中省略了接受数据验证的过程，大家可根据自己的需求进行扩展，下面进入主题。核心源码：1.配置文件:config.php,代码如下：<?php //数据库配...2015-10-30
- 本文章来给大家介绍一个原生态的ajax+php无刷新回贴和注册检验实例，如果你对此有兴趣不防进入参考哦。 先看xin.sql数据库，我们可直接复制保存成xxx.sql哦。 ...2016-11-25
- 主题皮肤切换功能在很多网站和系统中应用，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。本文将围绕如何使用jQuery实现点击无刷新切换主题皮肤功能。实现该功能的原理就是通过点击定义的主题样式，改变...2015-10-23
- <!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/...2016-11-25
- ajax.net +jquery 无刷新三级联动的实例代码，需要的朋友可以参考一下...2021-09-22
ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例
下面小编就为大家分享一篇ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22- 在静态HTM页面中实现无刷新的更换CSS样式！ 系统原来的更换CSS模板是要重新刷新一下儿页面的，我一直都对这个功能很不满意，百分之九十五的功能都用AJAX...2017-07-06
- 在这里上传图片就需要用到ajax无刷新上传图片，这里面包含的东西不是一点半点。这里用到的是一个插件swfupload实现无刷新上传图片，感兴趣的朋友可以参考下哈...2021-09-22
- 这是一款基于jquery Ajax实现文件无刷新上传文件例子，下面我们一起来看看吧，希望例子能帮助到各位同学哦。 PHP + jQuery Ajax文件上传实例。因为看到一些朋友询问...2016-11-25
- 实现ajax无刷新验证码首先需要两个aspx页面，第一个用来展示，另一个用来后台刷新验证码...2021-09-22
- 文件上传最简单的就是一个表单用户选择图片之后点击上传了，如果希望用户体验好点，我们可以使用ajax或iframe来上传了，下面一起来看一个例子。 在一个网站项目中，为了...2016-11-25
- 代码如下 复制代码 <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> 2 <html>...2016-11-25