ajax解決的下拉框的onchange問題
即在觸發地區下拉框的onchange事件時,代理商的下拉框選項也相應的改變,比如選擇地區 湖南—〉長沙,那麼代理商下拉框只顯示長沙的代理商。
本來認爲這個很好實現,但實際改起來的時候發現問題多多,主要問題是原有的地區聯動是用js實現的,它的數據源是一個xml文件,當然如果下拉框是服務器端控件那麼問題是很好解決的,現在是html控件一下子似乎還真有些不好改,想了幾種辦法實現起來都不理想,最後將思路轉向用ajax來實現問題才迎刃而解,現在仔細一想,像這種情況似乎只有用ajax才能比較好的.解決,如果是在地區下拉框的onchange事件裏向後臺進行一次提交,將地區下拉框的id傳過去的話,實際上產生的回發會將地區聯動下拉框重新初始化。
現在我具體談談這個ajax實現的過程。
首先頁面當然需要定義一個下拉框的html控件。
複製代碼 代碼如下:
接下來當然是定義XmlHttpRequest對象。
複製代碼 代碼如下:
var xmlhttp;
function CreateXmlHttp()
{
//非IE瀏覽器創建XmlHttpRequest對象
if(ttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE瀏覽器創建XmlHttpRequest對象
if(veXObject)
{
try
{
xmlhttp=new ActiveXObject("TTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("TTP");
}
catch(ex){}
}
}
}
這個在我的多篇blog文章裏都有闡述,就不多說了。
接下來當然是利用該對象來發送條件,獲得數據,並且將獲得的數據綁定到agent這個下拉框。
在地區下拉框的onchange事件裏面觸發函數AjaxSend();
複製代碼 代碼如下:
function AjaxSend()
{
//創建XmlHttpRequest對象
CreateXmlHttp();
if(!xmlhttp)
{
alert("創建xmlhttpRequest發生異常!");
return false;
}
//獲取地區下拉框的value值,作爲條件發送
var ss=lementById("a2")tring(0,4);
}
//要發送的url,UserAjax我專門用來取數據
url="
("POST",url,false);
adystatechange=function()
{
if(yState==4)
{
if(us==200)
{
//清空原下拉框
lementById("agent")th=0;
//str爲返回的一個字符串,形式爲"0001/代理商1,0002/代理商2,0003/代理商3"
var str=onseText;
//將該字符串分割爲數組形式
var strs=t(",");
lementById("agent")(new Option("----------","000000"));
for(var i=0;i<th-1;i++)
{
//獲取value值(編號)
var a=strs[i]tring(0,strs[i]IndexOf("/"));
//獲取綁定內容
var b=strs[i]tring(strs[i]IndexOf("/")+1,th);
//綁定到下拉框
lementById("agent")(new Option(b,a));
}
}
}
}
();
}
另外順便介紹一下UserAjax接收到該地區編號後獲取數據返回字符串的過程。
複製代碼 代碼如下:
string Area = yString["area"]ring();
DataTable data = "生成DataTable,涉及到公司核心代碼,省略"
string aa = "";
for (int i = 0; i < t; i++)
{
if (aa == "")
{
aa = [i]["id"]ring()+"/"+[i]["name"]ring();
}
else
{
aa = aa + "," + [i]["id"]ring() +"/"+ [i]["name"]ring();
}
}
e(aa);
這樣,一個比較棘手的問題用ajax就獲得了完美解決,並且不會因向後臺回發而導致下拉框初始化,導致選項改變,親愛的朋友,看了這個例子,你對ajax是不是也有了
更好的認識呢?
相關文章
-
Win10系統提示Officebackgroundtaskhandler.exe彈窗問題的解決方
win10系統經常彈出名稱爲“”的.彈窗怎麼辦?如何解決?針對這一問題,本文就爲大家圖文介紹Win10系統彈窗問題的解決方法,有興趣的朋友們就來了解下吧!前陣子有不少朋友反映,自己 Windows 10 屏幕總是會彈出一個神祕窗口,眼疾 -
大學英語作文On Changing Major Halfway
在日常學習、工作抑或是生活中,大家都接觸過作文吧,作文一定要做到主題集中,圍繞同一主題作深入闡述,切忌東拉西扯,主題渙散甚至無主題。怎麼寫作文才能避免踩雷呢?以下是小編爲大家整理的大學英語作文On Changing Major Ha -
Don’t Take the Age As an Excuse爲題目的作文
When I was small, I fell in love with tennis, so I like to watch tennis match so much. Today, the tennis players have extended their career time, before, most of them will retire around 30 years old, -
關於ASP.NET中TextBox使用Ajax控件顯示日期不全的問題解決方法
正常的引用複製代碼 代碼如下:<%@ register="" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AjaxToolKit">在某些情況下會有顯示不全日期的問題,這時候加上樣式即可。複製代碼 代碼 -
java如何利用java.net.URLConnection發送HTTP請求
在內科實習我嚴格遵守醫院規章制度。認真履行實習護士職責,嚴格要求自己,尊敬師長,團結同學,關心病人,不遲到,不早退,勤奮學習,以身作則,積極進取。以下是爲大家整理的內科實習的自我鑑定,希望對你們有所幫助! 篇一:內科 -
Advantages of Being a Teacher英語作文
I come from a family of teachers。 My father was a teacher, my sister is a teacher, and I am a teacher。 Why do we have strong passion for this profession?For one thing, I consider myself not only a teac -
A Lifeguard at Johns Beach Saved a Drowning Child,A Lifeguar英語作文
在生活、工作和學習中,大家一定都接觸過作文吧,作文是人們把記憶中所存儲的有關知識、經驗和思想用書面形式表達出來的記敘方式。爲了讓您在寫作文時更加簡單方便,下面是小編收集整理的'A Lifeguard at Johns Beach Sav -
On the Advantages of E-learning英語作文
In recent years, increasing numbers of students study online on Hujiang Online School, Khan Academy and Coursera. Not surprisingly, studying online will be a trend because it is relatively convenient -
java使用ConcurrentHashMap和計數器實現鎖的方法
java如何使用ConcurrentHashMap和計數器實現鎖?下面是由本站小編爲大家整理的java使用ConcurrentHashMap和計數器實現鎖的方法,喜歡的可以收藏一下!瞭解更多詳情資訊,請關注應屆畢業生考試網! java 使用ConcurrentHashM -
Great Changes in My Hometown爲題目的作文
Im really giad to see what have happened in my hometown I used to live in a small town with trees all e was no tall building and the only street was outside the town,there was a can see different ki