ajax實現(xiàn)動態(tài)下拉框示例
許多頁面上都涉及有下拉框,即select標(biāo)簽。對于簡單的下拉框,被選擇的數(shù)據(jù)是不需要改變的,我們可以用<option></option>寫死。這樣下拉框的數(shù)據(jù)永遠(yuǎn)都是那幾條。
示例:
<select> <option>信息一</option> <option>信息二</option> <option>信息三</option> <option>信息四</option> </select>
但是有些項目或者工程是需要將數(shù)據(jù)庫中的數(shù)據(jù)呈現(xiàn)出來并提供選擇的,下拉的內(nèi)容會隨數(shù)據(jù)庫中數(shù)據(jù)的變化而變化。首先我們有asp組件可以幫我們做這這件事情,DropDownList組件,只需要將數(shù)據(jù)庫中查詢得到的數(shù)據(jù)添加進(jìn)該組件中,在前臺即可以顯示出動態(tài)下拉的效果。如果想更有新意,不依賴于傳統(tǒng)組件,ajax就是個不錯的選擇。下面一步步來通過ajax實現(xiàn)動態(tài)下拉的效果。
1.js發(fā)出ajax請求:
$(document).ready(function () {
$.ajax({
timeout: 3000,
async: false,
type: "POST",
url: "WareHouse.ashx",
dataType: "json",
data: {
warehouse: $("#issued_sub_key_c").val(),
},
success: function (data) {
for (var i = 0; i < data.length; i++) {
$("#issued_sub_key_c").append("<option>" + data[i].Name + "</option>");
}
}
});
});
ajax請求WareHouse.ashx(一般處理程序)來獲得數(shù)據(jù),請求成功后將返回的json數(shù)據(jù)附加到id為issued_sub_key_c的select標(biāo)簽。值得注意的是這里將async的屬性改為了false,async的默認(rèn)狀態(tài)為true,即為異步。值改為false就是同步了。但是當(dāng)async為false的時候,ajax請求完數(shù)據(jù)之前,瀏覽器一直處于鎖死狀態(tài),這樣會讓使用者認(rèn)為程序崩潰了,所以就人為的添加了一個超時(timeout),這樣就不會出現(xiàn)程序崩潰的假象。回到話題開始,為什么要將async改為false呢?原因就是當(dāng)ajax是異步請求的時候進(jìn)入到頁面后出現(xiàn)下拉框數(shù)據(jù)還未同步,下拉框是空白數(shù)據(jù)(可以自己體驗體驗)。所以我們需要利用同步的特性并配合超時來完成下拉框的數(shù)據(jù)同步。
2.一般處理程序:從數(shù)據(jù)庫返回的數(shù)據(jù)是List<string>類型,我們需要自己定義一個toJson()方法將list轉(zhuǎn)化為json數(shù)據(jù),然后返回json數(shù)據(jù)。
public string toJson(List<string> str)
{
StringBuilder json = new StringBuilder();
if (str == null)
{
return "null";
}
json.Append("[");
foreach (var item in str)
{
json.Append("{\"Name\":\"");
json.Append(item);
json.Append("\"},");
}
return json.ToString().Substring(0, json.ToString().LastIndexOf(",")) + "]";
}
/*得到并關(guān)聯(lián)倉庫(select標(biāo)簽)*/
public void ProcessRequest(HttpContext context)
{
SubinventoryDC subinventorydc = new SubinventoryDC();
List<string> list = new List<string>();
list = subinventorydc.getAllSubinventory();
string json = toJson(list);
context.Response.ContentType = "text/plain";
context.Response.Write(json);
}
3.前臺頁面:前臺只需要定義一個id為issued_sub_key_c的select標(biāo)簽。注意select標(biāo)簽須得有一個name,后臺正是通過name來取得選中數(shù)據(jù)的值。取值方法:Request.Form["issued_sub_key_c"]。
<select id="issued_sub_key_c" name="issued_sub_key_c"> </select>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于jQuery實現(xiàn)帶動畫效果超炫酷的彈出對話框(附源碼下載)
這是一款基于jQuery的彈出對話框插件,這個jQuery對話框插件的最大特點是彈出和關(guān)閉都帶有非常炫酷的動畫特效,需要的朋友參考下吧2016-02-02
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個jquery的擴(kuò)展,這樣就可以很容易實現(xiàn)對textarea控制最大長度了。2011-09-09
web開發(fā)人員學(xué)習(xí)jQuery的6大理由及jQuery的優(yōu)勢介紹
jQuery是一個用來簡化HTML客戶端開發(fā)的JS(JavaScrip)庫,它支持HTML DOM處理,同時還融合了部分HTML和CSS2013-01-01
jQuery Easyui加載表格出錯時在表格中間顯示自定義的提示內(nèi)容
這篇文章主要介紹了jQuery Easyui加載表格出錯時在表格中間顯示自定義的提示內(nèi)容的相關(guān)資料,需要的朋友可以參考下2016-12-12
JQuery 無廢話系列教程(二) jquery實戰(zhàn)篇上
就進(jìn)入實戰(zhàn)?是不是太快了?我還不知道怎么用JQuery!! ...2009-06-06

