您的位置：首页 > 理论基础 > 计算机网络

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

2009-09-25 14:48 816 查看
在谈到 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"><!--

function GetSmallType(bigID,smallID,url,xmlvalue,xmltext){
//(大类控件的ID,小类控件的ID,读取小类数据apsx页,读取xml的值,读取xml的显示)
var drp2 = document.getElementById(smallID);
drp2.innerText="";
for(var i = 0;i<=drp2.options.length -1;i++)
{
drp2.remove(i);
}
var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
var state=document.getElementById(bigID).value;
xmlhttp.open("POST", url+state,false);
xmlhttp.send("");
var res=oDoc.loadXML(xmlhttp.responseText);
oDoc.setProperty("SelectionLanguage",   "XPath");
var naItems = oDoc.selectNodes(xmltext);
var idItems = oDoc.selectNodes(xmlvalue);
var item;
var id;
var newOption = document.createElement("OPTION");
newOption.text ="请选择小类";
newOption.value = "";
drp2.options.add(newOption);
for (item = naItems.nextNode(),id=idItems.nextNode(); item&&id; item = naItems.nextNode(),id=idItems.nextNode())
{
var nastr = item.nodeTypedValue;
var idstr = id.nodeTypedValue;
newOption = document.createElement("OPTION");
newOption.text =nastr;
newOption.value = idstr;
drp2.options.add(newOption);
}
}

// --></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>


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_GetSmallType : Design.Web.BasePage
{
protected void Page_Load(object sender, EventArgs e)
{
DataSet ds = new DataSet();
string id = this.Request["id"];
string strSQL = "select id,typename from wapinfotype where parent="+id+" order by id";
ds = new DataAccess().GetDataSet(strSQL);
ds.WriteXml(Response.OutputStream);
Response.Flush();
Response.End();
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航