asp+jQuery+json三級聯(lián)動-訪問數(shù)據(jù)庫或緩存
廣告：
文件:jquery-1.2.6.min.js
1.示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/Area.js" type="text/javascript"></script>
<script type="text/javascript">
//定義已選中公共變量
var nowarea_province,nowarea_city,nowarea_area;
nowarea_province="<%=now_province%>";
nowarea_city="<%=now_city%>";
nowarea_area="<%=now_area%>";
//調(diào)用插件
$(function(){
$("#nowarea").ProvinceCity("nowarea");
});
</script>
<style type="text/css">
#nowarea select{
min-width:110px!important;width:110px;
}
</style>
</head>
<body>所在地:<div id="nowarea"></div>
</body>
</html>
2.Area.js:
/**
* jQuery : 城市聯(lián)動插件 2009.6.6
* @author haohaibo <hao@861718.com>
* http://www.cha600.com
* @example $("#homearea").ProvinceCity("homearea");
* @params 暫無
*/
$.fn.ProvinceCity = function(cid){
var _self = this;
//定義3個默認(rèn)值
_self.data("province",["", "請選擇"]);
_self.data("city1",["", "請選擇"]);
_self.data("city2",["", "請選擇"]);
//插入3個空的下拉框
_self.append("<select name=\""+cid+"1\"></select>");
_self.append("<select name=\""+cid+"2\"></select>");
_self.append("<select name=\""+cid+"3\"></select>");
//分別獲取3個下拉框
var $sel1 = _self.find("select").eq(0);
var $sel2 = _self.find("select").eq(1);
var $sel3 = _self.find("select").eq(2);
//載入省份數(shù)據(jù)
//載入已選擇數(shù)據(jù)
if (eval(cid+"_province")!="")
{
Optionadd($sel1,"0",cid+"_province");
if (eval(cid+"_city")!="")
{
Optionadd($sel2,""+eval(cid+"_province")+"",cid+"_city");
if (eval(cid+"_area")!="")
{
Optionadd($sel3,""+eval(cid+"_city")+"",cid+"_area");
}
}
}
else
{
Optionadd($sel1,"0",cid+"_province");
//默認(rèn)的1級城市下拉
if(_self.data("city1")){
$sel2.append("<option value='"+_self.data("city1")[0]+"'>"+_self.data("city1")[1]+"</option>");
}
//默認(rèn)的2級城市下拉
if(_self.data("city2")){
$sel3.append("<option value='"+_self.data("city2")[0]+"'>"+_self.data("city2")[1]+"</option>");
}
}
//省級聯(lián)動 控制
var index1 = "" ;
$sel1.change(function(){
//清空其它2個下拉
$sel2[0].options.length=0;
$sel3[0].options.length=0;
index1 = this.selectedIndex;
if(index1==0){//當(dāng)選擇的為 “請選擇”
if(_self.data("city1")){
$sel2.append("<option value='"+_self.data("city1")[0]+"'>"+_self.data("city1")[1]+"</option>");
}
if(_self.data("city2")){
$sel3.append("<option value='"+_self.data("city2")[0]+"'>"+_self.data("city2")[1]+"</option>");
}
}
else if (index1==-1){ //當(dāng)省份有數(shù)據(jù)時
if (eval(cid+"_city")=="")
{
$sel2.append("<option value='"+_self.data("city1")[0]+"'>"+_self.data("city1")[1]+"</option>");
$sel3.append("<option value='"+_self.data("city2")[0]+"'>"+_self.data("city2")[1]+"</option>");
}
}
else{
//載入城市數(shù)據(jù);index1為省份選擇的索引
Optionadd($sel2,""+this.options[index1].value+"",cid+"_city");
$sel3.append("<option value=''>請選擇</option>");
}
}).change();
//1級城市聯(lián)動 控制
var index2 = "" ;
$sel2.change(function(){
$sel3[0].options.length=0;
index2 = this.selectedIndex;
Optionadd($sel3,""+this.options[index2].value+"",cid+"_area");
});
return _self;
};
function Optionadd(show1,p1,cid_selected)
{
//省份或城市開始載入數(shù)
//jquery_json.asp后臺應(yīng)定義 Response.Charset="gb2312"
$.ajax({
type:"POST",
url:"jquery_json.asp",
dataType:"json",
data:{"p":""+p1+""}, //p傳輸?shù)膮?shù)
success:function(json) {
if (json!=0)
{
show1.append("<option value=''>請選擇</option>");
for(i=0;i<json.address.length;i++)
{
//json為回傳的數(shù)據(jù)；"address"表名在回傳的json數(shù)據(jù)
if (json.address[i].areaid==eval(cid_selected))
show1.append("<option value='"+json.address[i].areaid+"' selected>"+json.address[i].cnname+"</option>");
else
show1.append("<option value='"+json.address[i].areaid+"'>"+json.address[i].cnname+"</option>");
}
}
else
show1.append("<option value=''>請選擇</option>");
//alert(json.address[0].cnname);
},
error:function(json) {
alert("error-$.ajax");
}
});
//省份或城市載入數(shù)據(jù)完
}
3.后臺文件:jquery_json.asp
<!--#include file="conn/conn.asp"-->
<!--#include file="conn/fun.asp"-->
<% Response.Charset="gb2312"
parent=int(request.form("p"))
sql="select areaid,cnname From cai_haoarea where parentid=" & parent & " "
set rs=server.CreateObject("adodb.recordset")
rs.open sql,conn,1,1
dim tempstr
dim countrs
countrs=rs.recordcount
if not rs.eof then
tempstr="{""address"": [ " '返回表名address
' tempstr="{""address"": [ "
i=0
do while not rs.eof
i=i+1
if i=countrs then
tempstr=tempstr & "{ ""areaid"": """& cstr(rs(0)) & """, ""cnname"": """ & rs(1) & """ }"
else
tempstr=tempstr & "{ ""areaid"": """& cstr(rs(0)) & """, ""cnname"": """ & rs(1) & """ }, "
end if
rs.movenext
loop
' tempstr=tempstr & " ]"
tempstr=tempstr & " ] }" '返回表名
response.write tempstr
set tempstr=nothing
else
response.write "0"
end if
rs.close
set rs=nothing
conn.close
set conn=nothing
response.end
%>
知識點:
json數(shù)據(jù)格式:
{"address": [ { "areaid": "1", "cnname": "北京市" },{ "areaid": "3275", "cnname": "澳門特別行政區(qū)" } ] }
注:address相當(dāng)于表名:
轉(zhuǎn)換為json: var oObject = JSON.parse (sJSON);
var myJSONObject = {"bindings": [
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
]
};
調(diào)用:
<script type="text/javascript">
var d = {"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com"},
{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" } ]
};
for(i=0;i<d.programmers.length;i++)
alert(d.programmers[i].firstName)
</script>
說明：后臺訪問數(shù)據(jù)庫也可訪問緩存數(shù)據(jù)或數(shù)組,這里就不舉例,以提高網(wǎng)站訪問性能.
廣告：
