js+xmlHttpRequest实现无刷新二级级联菜单（ajax原始）

来源：互联网发布：腾讯操盘手软件编辑：程序博客网时间：2024/06/06 19:27

在谈到 Ajax 时，实际上涉及到多种技术，要灵活地运用它必须深入了解这些不同的技术。好消息是我们可能已经非常熟悉其中的大部分技术，更好的是这些技术都很容易学习。
Ajax 的定义
顺便说一下，Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。

下面是 Ajax 应用程序所用到的基本技术：

    * HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
    * JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
    * DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。
    * 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

大小类级联菜单实现，基于Ajax 的原理

页面前台代码：

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation= "false" CodeFile="WapAdd.aspx.cs" Inherits="wap_WapAdd" %><!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 runat="server"> <title>无线网站信息发布</title> <link href="../skins/main.css" mce_href="skins/main.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript"></mce:script> </head><body> <form id="form1" runat="server"> <table cellspacing="1" cellpadding="0" width="632" border="0" align="center"> <tr> <td colspan="2" height="30"><div align="center" class="zp"><span class="font" style="font-size:12px; font-weight:bold;" mce_style="font-size:12px; font-weight:bold;">无线网站信息发布</span></div></td> </tr> <tr> <td align="right" valign="middle" bgcolor="#f2f2f2" style="height: 19px; width: 99px;"> 标题：</td> <td align="left" valign="middle" bgcolor="#f2f2f2" style="height: 19px"> <asp:TextBox ID="txttitle" runat="server" Width="306px"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txttitle" Display="Dynamic" ErrorMessage="请输入标题">*（请输入标题）</asp:RequiredFieldValidator></td> </tr> <tr> <td align="right" valign="middle" bgcolor="#f2f2f2" style="width: 99px; height: 13px"> 大类：</td> <td align="left" valign="middle" bgcolor="#f2f2f2" style="height: 13px"> <asp:DropDownList ID="ddldl" runat="server" Width="90px"> </asp:DropDownList> </td> </tr> <tr> <td align="right" bgcolor="#f2f2f2" rowspan="1" style="width: 99px; height: 22px;" valign="middle"> 小类：</td> <td align="left" bgcolor="#f2f2f2" style="height: 22px" valign="middle"> <asp:DropDownList ID="ddlxl" runat="server" Width="90px"> </asp:DropDownList> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ddlxl" Display="Dynamic" ErrorMessage="请输入小类">*（请输入小类）</asp:RequiredFieldValidator> <asp:TextBox ID="th" runat="server" Width="0px" CssClass="main_index_disp"></asp:TextBox></td> </tr> </table> </form></body></html>

页面后台代码：

using System;using System.Data;using System.Configuration;using System.Collections;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;public partial class wap_WapAdd : Design.Web.BasePage{ protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { //初始化大类下拉列表 String strSQL = "select id,typename from wapinfotype where parent=0"; DataSet ds = new DataAccess().GetDataSet(strSQL); if (ds != null) { this.ddldl.DataSource = ds; this.ddldl.DataTextField = "typename"; this.ddldl.DataValueField = "id"; this.ddldl.DataBind(); this.ddldl.SelectedValue = "1"; this.ddldl.Attributes.Add("onchange", "GetSmallType('ddldl','ddlxl','GetSmallType.aspx?id=','//NewDataSet/Table/ID','//NewDataSet/Table/TYPENAME')"); this.ddlxl.Attributes.Add("onChange", "javascript:document.form1.th.value=this.options[this.selectedIndex].value;"); } } } protected void Button1_Click(object sender, EventArgs e) { string sql = ""; //.............. int result = new DataAccess().ExecuteCommand(sql); if (result > 0) { this.AlertMessage("保存成功！"); } else { this.AlertMessage("保存失败，请稍后再试！"); } } }

读取小类处理页面，js把请求发到此页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetSmallType.aspx.cs" Inherits="wap_GetSmallType" %><!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 runat="server"> <title>小类</title></head><body> <form id="form1" runat="server"> <div> </div> </form></body></html>