联系我们
cms新闻网站系统、政府cms定制开发

广州网站建设公司-阅速公司

报纸新媒体网站内容发布一体化解决方案联系电话
/
http://www.kize.icu/
广州网站建设公司
您当前位置:首页>网站技术

网站技术

asp+jQuery+json三级联动-访问数据库或缓存

发布时间:2009/5/31 20:09:06  作者:  阅读:2643  

文件: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 <[email protected]>
* 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");
//默?#31995;?级城市下拉
if(_self.data("city1")){
$sel2.append("<option value='"+_self.data("city1")[0]+"'>"+_self.data("city1")[1]+"</option>");
}
//默?#31995;?级城市下拉
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传输的?#38382;?br />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": "[email protected]"},
{ "firstName": "Jason", "lastName":"Hunter", "email": "[email protected]" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" } ]
};

for(i=0;i<d.programmers.length;i++)
alert(d.programmers[i].firstName)

</script>

说明:后台访问数据库也可访问缓存数据或数组,这里就不举例,以提高网站访问?#38405;?

相关文章
三级联动
jquery
cms新闻系统购买咨询
扫描关注 广州阅速软件科技有限公司
扫描关注 广州阅速科技
莱万特s
5分赛计划靠谱吗 山东时时开奖图 四ill快乐12最大遗漏 时时彩计划软件排行 天津时时46分 2017历史记录开奖全版 新重庆时时开奖号码 三肖期期开奖 重庆时时最新开奖号码 四川时时变数字 九龙内部玄机 云南时时彩开奖结果记录表 云南时时彩开奖结果记录 六肖公式计算公式 河北快3助手下载 辽宁35选7走势图综合版