asp+jQuery+json三级联动-访问数据库或缓存
广告：阿里云采购优惠专区
文件: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%>";
//调用插件
$(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 : 城市联动插件 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个默认值
_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);
//载入省份数据
//载入已选择数据
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");
//默认的1级城市下拉
if(_self.data("city1")){
$sel2.append("<option value='"+_self.data("city1")[0]+"'>"+_self.data("city1")[1]+"</option>");
}
//默认的2级城市下拉
if(_self.data("city2")){
$sel3.append("<option value='"+_self.data("city2")[0]+"'>"+_self.data("city2")[1]+"</option>");
}
}
//省级联动 控制
var index1 = "" ;
$sel1.change(function(){
//清空其它2个下拉
$sel2[0].options.length=0;
$sel3[0].options.length=0;
index1 = this.selectedIndex;
if(index1==0){//当选择的为 “请选择”
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){ //当省份有数据时
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{
//载入城市数据;index1为省份选择的索引
Optionadd($sel2,""+this.options[index1].value+"",cid+"_city");
$sel3.append("<option value=''>请选择</option>");
}
}).change();
//1级城市联动 控制
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)
{
//省份或城市开始载入数
//jquery_json.asp后台应定义 Response.Charset="gb2312"
$.ajax({
type:"POST",
url:"jquery_json.asp",
dataType:"json",
data:{"p":""+p1+""}, //p传输的参数
success:function(json) {
if (json!=0)
{
show1.append("<option value=''>请选择</option>");
for(i=0;i<json.address.length;i++)
{
//json为回传的数据；"address"表名在回传的json数据
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");
}
});
//省份或城市载入数据完
}
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数据格式:
{"address": [ { "areaid": "1", "cnname": "北京市" },{ "areaid": "3275", "cnname": "澳门特别行政区" } ] }
注:address相当于表名:
转换为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.*"}
]
};
调用:
<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>
说明：后台访问数据库也可访问缓存数据或数组,这里就不举例,以提高网站访问性能.
广告：阿里云新人采购专场
