ajax|菜單|聯動菜單
代碼整個過程就是根據用戶端的url請求判斷哪個下拉式清單的選中項發生改變,伺服器根據請求url調用sql 資料庫產生相應的資料寫入tmp.xml並重新導向到它.由於XmlHttpRequest對象與伺服器互動時會得到執行完伺服器代碼後的response,所以tmp.xml資料將返回到用戶端.這就是整個代碼注要思想.值得注意的是在請求url時避免相同url,以免調用緩衝中資料.一般方法有設定頁面關閉寫入緩衝開關,在程式中設定頭部no-cache或者避免相同url.避免相同url可以在其後面加上目前時間來區分.
// MyADO:自訂ADO類.用來串連sql伺服器,得到資料..
public class MyADO
{
public MyADO()
{
}
public static SqlConnection Con(string SqlConnectionString)
{
SqlConnection MyCon = new SqlConnection(SqlConnectionString);
return MyCon;
}
public static SqlConnection Con()
{
SqlConnection MyCon = new SqlConnection("server=.;uid=sa;password=network;initial catalog=MyData");
return MyCon;
}
public static DataTable GetTableData(string TableName,SqlConnection Con)
{
SqlCommand MyCmd = new SqlCommand("select * from "+TableName,Con);
DataTable MyTable = new DataTable();
SqlDataAdapter MyAdapter = new SqlDataAdapter(MyCmd);
MyAdapter.Fill(MyTable);
return MyTable;
}
public static DataTable GetTableData(string CommandString)
{
SqlCommand MyCmd = new SqlCommand(CommandString,Con());
DataTable MyTable = new DataTable();
SqlDataAdapter MyAdapter = new SqlDataAdapter(MyCmd);
MyAdapter.Fill(MyTable);
return MyTable;
}
}
//------------------------------------main.aspx---------------------------------------------------------------------------------
private void Page_Load(object sender, System.EventArgs e)
{
if(!Page.IsPostBack)
{
Response.Clear();
DataSet MyDS = new DataSet();
if(Request.Url.ToString().IndexOf("?part=state") != -1)
{
MyDS.Tables.Add(MyADO.GetTableData("select * from Area where sz_code%10000=0"));
}
else if(Request.Url.ToString().IndexOf("?part=city") != -1 && Request.Url.ToString().IndexOf("sz_code=") != -1)
{
string str = Request.QueryString["sz_code"].ToString();
str = str.Substring(0,2)+"_[1-9]00";
MyDS.Tables.Add(MyADO.GetTableData("select * from Area where sz_code like '"+str+"'"));
}
else if(Request.Url.ToString().IndexOf("?part=town") != -1 && Request.Url.ToString().IndexOf("sz_code=") != -1)
{
string str = Request.QueryString["sz_code"].ToString();
str = str.Substring(0,4)+"_[1-9]";
MyDS.Tables.Add(MyADO.GetTableData("select * from Area where sz_code like '"+str+"'"));
}
MyDS.WriteXml(Request.PhysicalApplicationPath+"test.xml");
Response.Redirect("test.xml?timestamp="+Request.QueryString["timestamp"].ToString());
}
//-------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">...
var xhrObject; //xmlhttpresponse對象
var SelectID; //當前要填充的下拉式清單ID
function GetXhrObject()
...{
var XmlObject;
if(window.ActiveXObject)
...{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
...{
XmlObject = new XMLHttpRequest();
}
return XmlObject;
}
function MyEvent()
...{
var obj;
var NewOption;
if (xhrObject.readystate == 4)
...{
if(xhrObject.status == 200)
...{
obj = xhrObject.responseXml;
<!--如果使用者改變省份選項-->
if(SelectID=='city')
...{
document.getElementById("city").options.length=1;
}
<!--如果使用者改變城市選項-->
if(SelectID=='town')
...{
document.getElementById("town").options.length=1;
}
for(i=0;i<obj.getElementsByTagName("name").length;i++)
...{
NewOption = new Option(obj.getElementsByTagName("name")[i].childNodes[0].nodeValue,obj.getElementsByTagName("sz_code")[i].childNodes[0].nodeValue);
document.getElementById(SelectID).options.add(NewOption)
}
}
}
}
function GetSelect(citytype)
...{
xhrObject=GetXhrObject();
xhrObject.onreadystatechange = MyEvent;
var QueryString;
if(citytype == 'city')
...{
SelectID = "city";
QueryString = document.getElementById("select").value;
xhrObject.open("GET","select.aspx?part=city&sz_code="+QueryString+"&timeStamp="+new Date().getTime());
}
else if(citytype == 'town')
...{
SelectID = "town";
QueryString = document.getElementById("city").value;
xhrObject.open("GET","select.aspx?part=town&sz_code="+QueryString+"&timeStamp="+new Date().getTime());
}
else if(citytype == 'state')
...{
SelectID = "select";
xhrObject.open("GET","select.aspx?part=state×tamp="+new Date().getTime());
}
xhrObject.send(null);
}
</script>
<input style="Z-INDEX: 100; LEFT: 64px; WIDTH: 64px; POSITION: absolute; TOP: 328px; HEIGHT: 22px" type="button">
<SELECT id="town" style="Z-INDEX: 104; LEFT: 360px; WIDTH: 80px; POSITION: absolute; TOP: 152px">
<option value="區縣">縣區</option>
</SELECT><SELECT id="city" style="Z-INDEX: 103; LEFT: 272px; WIDTH: 80px; POSITION:absolute; TOP: 152px">
<option value="城市">城市</option>
</SELECT><SELECT id="select" style="Z-INDEX: 101; LEFT: 144px; WIDTH: 120px; POSITION: absolute; TOP: 152px">
<option value="省份">省份</option>
</SELECT>
縣區 城市 省份