AJax实现级联菜单:一个菜单onchange时,另两个菜单从数据库读取对应数据并绑定,如何实现?
关键代码:
var url = "Handler.ashx?type=shi&id=" + va;
// 下面根据条件去Handler.ashx捞取数据,并通过populateClass4绑定到控件。如何将省的数据也返回来并绑定到sheng的控件上?
send_request("GET",url,null,"text",populateClass4);下面是全部代码:
前台:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.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>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript" src="ajax_func.js"></script>
<script>
function changshi(va)
{
if(va!='0')
{
var qu = document.getElementById("qu");
qu.disabled = false;
var url = "Handler.ashx?type=shi&id=" + va;
// 下面根据条件去Handler.ashx捞取数据,并通过populateClass4绑定到控件。如何将省的数据也返回来并绑定到sheng的控件上?
send_request("GET",url,null,"text",populateClass4);
}
}
function populateClass4(){
var f=document.getElementById("qu");
if(http_request.readyState==4){
if(http_request.status==200){
var list=http_request.responseText;
var classList=list.split("|");
f.options.length=1;
for(var i=0;i<classList.length;i++){
var tmp=classList[i].split(",");
f.add(new Option(tmp[1],tmp[0]));
}
}else{
alert("您所请求的页面有异常。");
}
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<FONT face="宋体"></FONT>
<!--省份列表 这里的数据是根据更改city列表得到。。-->
<select id="sheng" style="width: 121px" runat="server">
<option value="0">
--请选择省--
</option>
</select>
<!--城市列表 页面载入时绑定-->
<select id="city" runat="server" onchange="changshi(this.value)">
<option value="0">
--请选择市--
</option>
</select>
<!--区的列表 这里的数据是根据更改city列表得到-->
<select id="qu" runat="server" >
<option value="0">
--请选择区--
</option>
</select>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</form>
</body>
</html>Handler.ashx<%@ WebHandler Language="C#" Class="Handler" %>using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string type = context.Request.QueryString["type"];
if (type.Equals("sheng"))
{
string id = context.Request.QueryString["id"];
context.Response.ContentType = "text/plain";
context.Response.Write(getsh1(id));//这个是从数据库中根据传来省的id 查询出来的。市的名字和主键,主键以便去查区的名字
}
else if (type.Equals("shi"))
{
string id = context.Request.QueryString["id"];
context.Response.ContentType = "text/plain";
context.Response.Write(getqu(id));
context.Response.Write(getsh1(id));//这个是从数据库中根据传来省的id 查询出来的。市的名字和主键,主键以便去查区的名字
}
} public string getqu(string shi)
{
DataSet ds = SqlDataAccess.GetAreaInfo(shi);
string str = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (i == ds.Tables[0].Rows.Count - 1)
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString();
}
else
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|";
}
}
return str.Trim();
}
public string getsh1(string shi)
{
//DataSet ds = SqlDataAccess.GetAreaInfo(shi);
DataSet ds1 = SqlDataAccess.GetProvinceInfo1(shi);
string str1 = "";
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
if (i == ds1.Tables[0].Rows.Count - 1)
{
str1 += ds1.Tables[0].Rows[i]["code"].ToString() + "," + ds1.Tables[0].Rows[i]["name"].ToString();
}
else
{
str1 += ds1.Tables[0].Rows[i]["code"].ToString() + "," + ds1.Tables[0].Rows[i]["name"].ToString() + "|";
}
str1 = str1 + "|";
}
return str1.Trim();
}
/* public string getSheng(string sheng)
{
//DataSet ds = SqlDataAccess.GetCityInfo(sheng);
DataSet ds = SqlDataAccess.GetProvinceInfo1(sheng);
string str = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (i == ds.Tables[0].Rows.Count - 1)
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString();
}
else
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|";
}
}
return str.Trim();
}
*/
public bool IsReusable {
get {
return false;
}
}}Ajax级联菜单
关键代码:
var url = "Handler.ashx?type=shi&id=" + va;
// 下面根据条件去Handler.ashx捞取数据,并通过populateClass4绑定到控件。如何将省的数据也返回来并绑定到sheng的控件上?
send_request("GET",url,null,"text",populateClass4);下面是全部代码:
前台:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.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>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script type="text/javascript" src="ajax_func.js"></script>
<script>
function changshi(va)
{
if(va!='0')
{
var qu = document.getElementById("qu");
qu.disabled = false;
var url = "Handler.ashx?type=shi&id=" + va;
// 下面根据条件去Handler.ashx捞取数据,并通过populateClass4绑定到控件。如何将省的数据也返回来并绑定到sheng的控件上?
send_request("GET",url,null,"text",populateClass4);
}
}
function populateClass4(){
var f=document.getElementById("qu");
if(http_request.readyState==4){
if(http_request.status==200){
var list=http_request.responseText;
var classList=list.split("|");
f.options.length=1;
for(var i=0;i<classList.length;i++){
var tmp=classList[i].split(",");
f.add(new Option(tmp[1],tmp[0]));
}
}else{
alert("您所请求的页面有异常。");
}
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<FONT face="宋体"></FONT>
<!--省份列表 这里的数据是根据更改city列表得到。。-->
<select id="sheng" style="width: 121px" runat="server">
<option value="0">
--请选择省--
</option>
</select>
<!--城市列表 页面载入时绑定-->
<select id="city" runat="server" onchange="changshi(this.value)">
<option value="0">
--请选择市--
</option>
</select>
<!--区的列表 这里的数据是根据更改city列表得到-->
<select id="qu" runat="server" >
<option value="0">
--请选择区--
</option>
</select>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
</form>
</body>
</html>Handler.ashx<%@ WebHandler Language="C#" Class="Handler" %>using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string type = context.Request.QueryString["type"];
if (type.Equals("sheng"))
{
string id = context.Request.QueryString["id"];
context.Response.ContentType = "text/plain";
context.Response.Write(getsh1(id));//这个是从数据库中根据传来省的id 查询出来的。市的名字和主键,主键以便去查区的名字
}
else if (type.Equals("shi"))
{
string id = context.Request.QueryString["id"];
context.Response.ContentType = "text/plain";
context.Response.Write(getqu(id));
context.Response.Write(getsh1(id));//这个是从数据库中根据传来省的id 查询出来的。市的名字和主键,主键以便去查区的名字
}
} public string getqu(string shi)
{
DataSet ds = SqlDataAccess.GetAreaInfo(shi);
string str = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (i == ds.Tables[0].Rows.Count - 1)
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString();
}
else
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|";
}
}
return str.Trim();
}
public string getsh1(string shi)
{
//DataSet ds = SqlDataAccess.GetAreaInfo(shi);
DataSet ds1 = SqlDataAccess.GetProvinceInfo1(shi);
string str1 = "";
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
if (i == ds1.Tables[0].Rows.Count - 1)
{
str1 += ds1.Tables[0].Rows[i]["code"].ToString() + "," + ds1.Tables[0].Rows[i]["name"].ToString();
}
else
{
str1 += ds1.Tables[0].Rows[i]["code"].ToString() + "," + ds1.Tables[0].Rows[i]["name"].ToString() + "|";
}
str1 = str1 + "|";
}
return str1.Trim();
}
/* public string getSheng(string sheng)
{
//DataSet ds = SqlDataAccess.GetCityInfo(sheng);
DataSet ds = SqlDataAccess.GetProvinceInfo1(sheng);
string str = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (i == ds.Tables[0].Rows.Count - 1)
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString();
}
else
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|";
}
}
return str.Trim();
}
*/
public bool IsReusable {
get {
return false;
}
}}Ajax级联菜单
解决方案 »
- 帮忙把有一对这个{}的用正则匹配出来 谢谢 在线等
- 设置FrameSet宽度并居中对齐的简单方法
- acess数据库,这句为什么还让指定classID 的值
- 如何提取正则表达式中的变量
- 如何将Web应用程序和Outlook 2007集成在一起
- 一个网站合作问题,不知道怎么解决?????请高手指教指教!!!!!
- 请教一个使用用户控件时候的问题
- 如何实现点击gridview某一行,显示该行数据到相应的textbox和fileupload进行编辑??
- 奇怪的问题,有关条件判断
- 无法加载DLL(OCI.DLL),如何解决?
- 应用程序中的服务器错误。
- 在前台显示sql中统计的多个表中不同字段等于某个值得数量应该怎么做
string jsonTemp="{
\"sheng\":[
{\"key\":\"value\"},
{\"key\":\"value\"},
{\"key\":\"value\"}
]
,
\"shi\":[
{\"key\":\"value\"},
{\"key\":\"value\"},
{\"key\":\"value\"}
]
}"然后Ajax返回的json数据在前台解析一下就可以了。
那就以不同的格式将他分开,在前台进行解析嘛比如后台输出:{数据1-数据2};
前台进行解析出:数据1
数据2
嗯,但现在是数据无法返回是不能取到数据还是不能办出数据还是不能解析数据?
一步一步看,数据无法返回这个问题太广义了,定位到具体的步骤吧。
调试的时候在handler.ashx中有数据
context.Response.Write(getqu(id));
context.Response.Write(getsh1(id));
没注释的地方有数据返回,把注释掉的地方取水注释,就没有数据了,最关键的地方populateClass5,list没数据。function changshi(va)
{
if(va!='0')
{
var qu = document.getElementById("qu");
alert(va);
var url="Handler.ashx?type=shi&id="+va;
send_request("GET", url, null, "text", populateClass4); /////////////
/*
var sheng = document.getElementById("sheng");
var url1 = "Handler.ashx?type=sheng&id=" + va;
send_request("GET", url1, null, "text", populateClass5);
*/
}
} function populateClass4() {
populateClass5()
var f=document.getElementById("qu");
if(http_request.readyState==4){
if(http_request.status==200){
var list=http_request.responseText;
var classList=list.split("|");
f.options.length=1;
for(var i=0;i<classList.length;i++){
var tmp=classList[i].split(",");
f.add(new Option(tmp[1],tmp[0]));
}
}else{
alert("您所请求的页面有异常。");
}
}}
function populateClass5() {
var f1 = document.getElementById("sheng");
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var list1 = http_request.responseText;
var classList1 = list1.split("|");
f1.options.length = 1;
for (var i = 0; i < classList1.length; i++) {
var tmp = classList1[i].split(",");
f1.add(new Option(tmp[1], tmp[0]));
}
} else {
alert("您所请求的页面有异常111。");
}
}
}