求个AJAX无刷新技术代码

zhang_13245768 2009-03-23 09:02:54

页面有3个DropdownList，分别为A，B和C，当选择A中的某项，B中出现相应的数据，选择B中的某项后，
C中出现相应的数据，分两步来出现数据，不是选择A马上B和C都有数据，不想用控件来实现，求高人能指点个AJAX手写代码来实现。

...全文

322 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

zzxap 2009-03-24

打赏
举报

[code=HTML]

用Ajax.net实现的一个无刷新的多级联动下拉列表框
(转载)
用Ajax.NET Ectention 实现的一个无刷新的多级动态下拉列表框，使用的3个UpdatePanel，每一个中放一个DropDownList，分别为
DropDownList1、2、2，其中UpdatePanel2由UpdatePanel1触发，UpdatePanel3由UpdatePanel2和UpdatePanel1共同触发，
也可以增加到很多级，只要类似的改代码就可以了。
以下为源代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="float: left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Width="184px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" OnTextChanged="DropDownList1_SelectedIndexChanged" >

</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div style="float: left">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" Width="168px" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" >

</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" Width="160px">

</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>

// Default.aspx.cs文件
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Collections;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DropDownList1.DataSource = CreateSource(0);
DropDownList1.DataTextField = "TypeName";
DropDownList1.DataValueField = "TypeID";
DropDownList1.DataBind();
int PreID = Convert.ToInt32(DropDownList1.SelectedValue);
DropDownList2.DataSource = CreateSource(PreID);
DropDownList2.DataTextField = "TypeName";
DropDownList2.DataValueField = "TypeID";
DropDownList2.DataBind();
PreID = Convert.ToInt32(DropDownList2.SelectedValue);
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
int PreID = Convert.ToInt32(DropDownList1.SelectedValue);
if (CreateSource(PreID) != null)
{
DropDownList2.DataSource = CreateSource(PreID);
DropDownList2.DataTextField = "TypeName";
DropDownList2.DataValueField = "TypeID";
DropDownList2.DataBind();
PreID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CreateSource(PreID) != null)
{
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
else
{
DropDownList3.Items.Clear();
}
}
else
{
DropDownList2.Items.Clear();
DropDownList3.Items.Clear();

}

}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
int PreID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CreateSource(PreID) != null)
{
DropDownList3.DataSource = CreateSource(PreID);
DropDownList3.DataTextField = "TypeName";
DropDownList3.DataValueField = "TypeID";
DropDownList3.DataBind();
}
else
{
DropDownList3.Items.Clear();
}
}
protected ICollection CreateSource(int preId)
{
SqlConnection conn = new SqlConnection();
conn.ConnectionString = ConfigurationManager.ConnectionStrings["NewsReleaseConnectionString"].ConnectionString;
string sqlStr="Select TypeId,TypeName From ArticleType Where PreId=' "+preId.ToString()+"'";
SqlDataAdapter sda = new SqlDataAdapter(sqlStr,conn);
DataSet ds = new DataSet();
sda.Fill(ds);
if (ds.Tables[0].Rows.Count <= 0)
{
return null;
}
else
{
return ds.Tables[0].DefaultView;
}

}
}

数据库中的相应表的SQL

USE [NewsRelease]
GO
/****** 对象: Table [dbo].[ArticleType] 脚本日期: 12/05/2007 12:49:06 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[ArticleType](
[TypeID] [bigint] IDENTITY(1,1) NOT FOR REPLICATION NOT NULL,
[TypeName] [varchar](20) COLLATE Chinese_PRC_CI_AS NOT NULL,
[PreID] [bigint] NOT NULL,
[AddTime] [datetime] NULL,
CONSTRAINT [PK_ArticleType] PRIMARY KEY CLUSTERED
(
[TypeID] ASC
)WITH (PAD_INDEX = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
[/CODE]

zzxap 2009-03-24

打赏
举报

<asp:Label ID="doing" runat="server" style="display:none;" ></asp:Label>
<asp:DropDownList ID="ddlGrade" onchange="ddlBind('ddlGrade','ddlClass','ddlClassCall.aspx')" runat="server"></asp:DropDownList>
<asp:TextBox runat="server" ID="ddlGradeT" style="display:none"></asp:TextBox>
<asp:DropDownList ID="ddlClass" runat="server"></asp:DropDownList>
<asp:TextBox runat="server" ID="ddlClassT" style="display:none"></asp:TextBox>

//JS 文件
//ajax 异步加载下拉列表
function ddlBind(ID,BindID,url)
{

var selectedValue = document.all(ID).value;
document.all(ID+"T").value=selectedValue;//每个下拉列表都有相应的文本框装着它的选中值
var str="type="+selectedValue+"&bindID="+BindID;
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=stateChangeDDL;
xmlhttp.Open("GET",url+"?"+str,true);
xmlhttp.Send();
}
//执行状态
function stateChangeDDL()
{
if(xmlhttp.readystate==1)
{
document.getElementById("doing").style.display="";
document.getElementById("doing").innerHTML="<div id='doing' style='position: absolute; background: #f2f2f2; color:#f00; border: solid 3px #CCC; width: 30%; height: 30%; left: 100px; top: 100px;'>请稍候，正在加载…… </div>";
}
if(xmlhttp.readystate==4)
{
FillDDLData(xmlhttp.responseText);
document.getElementById("doing").style.display="none";
}

}
// 填充下拉列表
function FillDDLData(strtype)
{
var ID;
var ReturnValue=strtype.split('☆');
ID=ReturnValue[0];
strtype=ReturnValue[1];
document.getElementById(ID).options.length=0;
var indexoftype;
var type;
if(strtype.length==0)
{
document.getElementById(ID).add(new Option('没有选项','0'));
}
else
{
document.getElementById(ID).add(new Option('==请选择==','0'));
while(strtype.length>0)
{
indexoftype=strtype.indexOf(",");
if(indexoftype>0)
{
type=strtype.substring(0,indexoftype);
strtype=strtype.substring(indexoftype+1);
var text=type.split('※');
document.getElementById(ID).add(new Option(text[0],text[1]));
}
else
{
var text=strtype.split('※');
document.getElementById(ID).add(new Option(text[0],text[1]));
break;
}
}
}
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlClassCall.aspx.cs" Inherits="teacher_searchStudentResultCall" %>
//ddlClassCall.aspx.cs
//班级无刷新绑定
if (Request["type"] != null)
{
string type = Request["type"].ToString();
string BindID = Request["bindID"].ToString()+"☆";
string returnValue = "";
//取得你的数据集 dtr ,根据Request["type"] 为查询条件
while (dtr.Read())
{
returnValue += dtr["className"].ToString() + "※" + dtr["classID"].ToString() + ",";
}
returnValue = BindID + returnValue;
Response.Write(returnValue);
}

sjt000 2009-03-24

打赏
举报

三级联动～

ecp2008 2009-03-24

打赏
举报

看到12楼的答案了，做的非常的好，如果你再把Access里的数据导入到你所需要的数据库中，估计你想做什么都可以了，可以给分结贴了

jhdxhj 2009-03-24

打赏
举报

ding

houndsky 2009-03-24

打赏
举报

这里有实例下载：http://www.li-gang.cn/200903/21.html
演示页面



<script language="JavaScript">

<!--

function createXMLHttps()

{ 

    var ret = null; 

    try

    { 

        ret = new ActiveXObject('Msxml2.XMLHTTP'); 

    } 

    catch(e)

    { 

        try

        { 

            ret = new ActiveXObject('Microsoft.XMLHTTP'); 

        } 

        catch(ee)

        { 

            ret = null; 

        }       

    } 

    if (!ret && typeof XMLHttpRequest != 'undefined') 

    ret = new XMLHttpRequest(); 

    return ret; 

} 

//获取城市数据

function XmlCityPost(obj)

{

    var svalue = obj.value;

    document.getElementById("ddlCounty").length= 0;

    document.getElementById("ddlCounty").options.add(new Option("请选择县区","0"));

    if(svalue == "0")

    {

        document.getElementById("ddlCity").length= 0;

        document.getElementById("ddlCity").options.add(new Option("请选择城市","0"));

    }

    else

    {

        var webFileUrl = "?povinceid=" + svalue;

        var result = "";

        var newxmlhttp = createXMLHttps();

        newxmlhttp.open("POST", webFileUrl, false);

        newxmlhttp.send("");

        result = newxmlhttp.responseText;

        if(result != "")

        {

            document.getElementById("ddlCity").length=0;　

            document.getElementById("ddlCity").options.add(new Option("请选择城市","0"));

            var piArray = result.split(",");

            for(var i=0;i<piArray.length;i++)

            {

                var ary1 = piArray[i].toString().split("|");

                document.getElementById("ddlCity").options.add(new Option(ary1[1].toString(),ary1[0].toString()));

            }

        }

        else

        {

            document.getElementById("ddlCity").length= 0;

            document.getElementById("ddlCity").options.add(new Option("请选择城市","0"));

        }

    }

}

//获取县区数据

function XmlCountyPost(obj)

{

    var svalue = obj.value;

    if(svalue == "0")

    {

        document.getElementById("ddlCounty").length= 0;

        document.getElementById("ddlCounty").options.add(new Option("请选择县区","0"));

    }

    else

    {

        var webFileUrl = "?cityid=" + svalue;

        var result = "";

        var newxmlhttp = createXMLHttps();

        newxmlhttp.open("POST", webFileUrl, false);

        newxmlhttp.send("");

        result = newxmlhttp.responseText;

        if(result != "")

        {

            document.getElementById("ddlCounty").length=0;

            var piArray = result.split(",");

            document.getElementById("ddlCounty").options.add(new Option("请选择县区","0"));

            for(var i=0;i<piArray.length;i++)

            {

                var ary1 = piArray[i].toString().split("|");

                document.getElementById("ddlCounty").options.add(new Option(ary1[1].toString(),ary1[0].toString()));

            }

        }

        else

        {

            document.getElementById("ddlCounty").length= 0;

            document.getElementById("ddlCounty").options.add(new Option("请选择县区","0"));

        }

    }

}                

//-->

</script>

<asp:DropDownList ID="ddlProvince" runat="server">

    <asp:ListItem Text="请选择省份" Value="0"></asp:ListItem>

</asp:DropDownList>

<asp:DropDownList ID="ddlCity" runat="server">

    <asp:ListItem Text="请选择城市" Value="0"></asp:ListItem>

</asp:DropDownList>

<asp:DropDownList ID="ddlCounty" runat="server">

    <asp:ListItem Text="请选择县区" Value="0"></asp:ListItem>

</asp:DropDownList>



protected void Page_Load(object sender, EventArgs e)

    {

        if (!this.IsPostBack)

        {

            province_bind();

            ddlProvince.Attributes.Add("onchange", "XmlCityPost(this);");

            ddlCity.Attributes.Add("onchange", "XmlCountyPost(this);");

        }

        if (povinceid != "")

        {

            city_bind(povinceid);

        }

        if (cityid != "")

        {

            county_bind(cityid);

        }

    }



    public static DataSet GetDataSet(string sql)

    {

        Page page = new Page();

        string ConnectionString = "Provider=Microsoft.Jet.OleDb.4.0;Data Source=" + page.Server.MapPath("area.mdb");

        OleDbDataAdapter oda = new OleDbDataAdapter(sql, ConnectionString);

        DataSet ds = new DataSet();

        oda.Fill(ds);

        return ds;

    }



    private string povinceid

    {

        get

        {

            if (ViewState["povinceid"] != null && ViewState["povinceid"].ToString() != "")

            {

                return ViewState["povinceid"].ToString();

            }

            else

            {

                if (Request["povinceid"] != null && Request["povinceid"].ToString() != "")

                {

                    return Request["povinceid"];

                }

                else

                {

                    return "";

                }

            }

        }

        set

        {

            ViewState["povinceid"] = value;

        }

    }



    private string cityid

    {

        get

        {

            if (ViewState["cityid"] != null && ViewState["cityid"].ToString() != "")

            {

                return ViewState["cityid"].ToString();

            }

            else

            {

                if (Request["cityid"] != null && Request["cityid"].ToString() != "")

                {

                    return Request["cityid"];

                }

                else

                {

                    return "";

                }

            }

        }

        set

        {

            ViewState["povinceid"] = value;

        }

    }



    /// <summary>

    /// 获取城市数据

    /// </summary>

    /// <param name="id">省份ID</param>

    private void city_bind(string id)

    {

        string mystr = "";

        string sql = "select cityID,city from city where father = '" + id + "'";

        DataSet ds = GetDataSet(sql);



        if (ds.Tables[0].Rows.Count != 0)

        {

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

            {

                mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();

            }

            mystr = mystr.Substring(1);

        }

        Response.Write(mystr);

        Response.End();

    }



    /// <summary>

    /// 获取县区数据

    /// </summary>

    /// <param name="id">城市ID</param>

    private void county_bind(string id)

    {

        string mystr = "";

        string sql = "select areaID,area from area where father = '" + id + "'";

        DataSet ds = GetDataSet(sql);

        if (ds.Tables[0].Rows.Count != 0)

        {

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

            {

                mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();

            }

            mystr = mystr.Substring(1);

        }

        Response.Write(mystr);

        Response.End();

    }



    /// <summary>

    /// 省份数据绑定

    /// </summary>

    private void province_bind()

    {

        string sql = "select provinceID,province from povince";

        DataSet ds = GetDataSet(sql);

        ddlProvince.AppendDataBoundItems = true;

        ddlProvince.DataSource = ds;

        ddlProvince.DataValueField = "provinceID";

        ddlProvince.DataTextField = "province";

        ddlProvince.DataBind();

    }

zhang_13245768 2009-03-23

打赏
举报

我是要连接数据库的

风骑士之怒 2009-03-23

打赏
举报

利用AJAX Control ToolKit控件集里面的CascadingDropDown控件可以实现，

CascadingDropDown控件类型：具有AJAX功能的Extender控件

功能：提供一组联动式的DropDownList，可在不Postback的状况下，通过WEB services动态从Server端（数据库中）获取DropDownList内的Item。

使用时机：在页面上呈现出分类选项，例如工厂、部门等多层次数据，item数众多，想通过多个DropDownList分类，但又不想换页（postback）时使用

jasondct 2009-03-23

打赏
举报

这个简单些方法是一样的　复制到ｔｘｔ　然后换后缀
<div align="center">
<form name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>◤阿里西西◢</option>
<option>★CGI程序设计</option>
<option>★FLASH欣赏</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤------第二层菜单------◢</option>
<option value=" " selected>◤------第二层菜单------◢</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected></option>')
<option value=" " selected>◤------第三层菜单------◢</option>
<option value=" " selected>◤------第三层菜单------◢</option>
</select></table>
</form></div>
<script language="JavaScript">

</script>

jasondct 2009-03-23

打赏
举报

js实现的三级互联。复制到ｔｘｔ　。把后缀换成html就能实现
<SCRIPT LANGUAGE="JavaScript">

</script>
<form name=myChoices>
<table align="center">
<tr>
<td>
<SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>[SELECT]</option>
<option value=1>Land</option>
<option value=2>Sea</option>
<option value=3>Air</option>
</SELECT>
</TD><TD>
<SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT>
<SELECT id=thirdChoice name=thirdChoice>
</SELECT>
</TD>
</TR>
</TABLE>
</form>

coodd 2009-03-23

打赏
举报

写过N个类似了，不过还没有封装起来，决定自己做一个控件。

zhang_13245768 2009-03-23

打赏
举报

还有没有例子啊，越多越好啊呵呵

wuyq11 2009-03-23

打赏
举报

http://www.cnblogs.com/singlepine/archive/2005/10/19/257954.html

uymzqr 2009-03-23

打赏
举报

双线主机100M/35元(年),免费赠送数据库：(自选MY/MSSQL)
详情请访问：http://www.515dns.com
QQ：287895593

ikiss 2009-03-23

打赏
举报

不好意思,倒数第二行语句写错了,改一下
bool exist=DR.Read();
Conn.Close();
return exist;

ikiss 2009-03-23

打赏
举报

这是我以前写过的一个例子,用作验证用户名是否已被使用

设计思路：
1.javascript获取输入的用户名
2.用XMLHTTPRequest把用户名提交给动态处理页面(本例采用ASP.net+C#，如果是其它语言也可以)
3.后台处理页面获取此用户名后在数据库中查询用户是否已存在，如果存在就返回 "true"
4.XMLHTTPRequest获取输出的字符串
5.根据输出结果在页面上显示“用户已存在”或“可以注册”字样

前台页面如下：
<html>
<body>
<input id="inName" type="text" onchange="checkName()" /> <span id="checkNameText"></span>
</body>
</html>
<script type="text/javascript">
var request=new ActiveXObject("Microsoft.XMLHTTP");
//此函数获取输入的用户名并提交
function checkName()
{
var strName=document.getElementById("inName").value;
//通过Open方法把参数传递给后台页面
request.open("GET","AjaxAction.aspx?checkname="+strName,true);
//后台操作完毕后用checkNameText函数来处理结果
request.onreadystatechange=function(){checkNameText();}
//发送请示
request.send();
}
//此函数获得处理页面的输出字符
function checkNameText()
{
//用responseText方法获得输出的字符串，判断后进行相应处理
if(request.responseText=="true")
{
document.getElementById("nameInfo").innerHTML="<font color=red>用户已存在</font>";
}
else
{
document.getElementById("nameInfo").innerHTML="<font color=green>可以注册</font>";
}
}
</script>

后台页面，在aspx中只能有<%@ %>指令，不能出现任何HTML代码否则将出错
.cs文件中的主要代码
//如果
if (Request.QueryString["checkname"] != null)
{
//用URL中的checkname值作为参数将CheckUser函数返回的bool型结果转换成小写字符串输出
Response.Write(CheckUser(Request.QueryString["checkname"].ToString()).ToString().ToLower());
}
//验证用户是否存在，如果存在就返回True
bool CheckUser(string Name)
{
SqlConnection Conn = new SqlConnection(ConfigurationSettings.AppSettings[0]);
SqlCommand Cmd = new SqlCommand("select id from USER where NAME='" + Name + "'", Conn);
Conn.Open();
SqlDataReader DR = Cmd.ExecuteReader();
return DR.Read();
Conn.Close();
}