ajax josn 城市
<div id="demo"></div>
省/直辖市：<select style="width: 100px" id="op1" onchange="OpSelectChange(this)" name="op1"></select> 市：<select style="width: 100px" id="op2" onchange="OpSelectChange(this)" name="op2"></select> 县/区：<select style="width: 100px" id="op3" onchange="this.value=this.options[this.selectedIndex].value;" name="op3"></select>
<script language="javascript" type="text/javascript">
var request;
var OptionsName;
iniOptions();
//初始化第一个列表框
function iniOptions() {
OptionsName = "op1";
getNextOptions(""); //初始化第一个列表框
}
//创建求XMLHttpRequest对象
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("错误，无法请求XMLHttpRequest!");
}
//发送请求，获取下一个列表框的列表数据
//参数oValue为当前列表框的选中值，此值作为下一个列表框的parentID号
function getNextOptions(oValue) {
createRequest();
var url = "OptionServer.asp?parentid=" + oValue;
request.open("GET", url, true);
request.onreadystatechange = opcallback;
request.send(null);
}
//回调函数
function opcallback() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText; //获取服务器返回的JSON字串
addOptions(response); //添加option选项
} else
alert("status is " + request.status);
}
}
//添加option选项
function addOptions(str) {
var jsonObj = eval(str);// JSON字符串转JSON对象
var opObj = document.getElementById(OptionsName);
clearlaterOP();
for (i = 0; i < jsonObj.length; i++) {
var TemOption = new Option(jsonObj[i].title, jsonObj[i].value); //定义一个选项对象
if (i==0) TemOption.selected = "selected"; //设定第一项为被选项
opObj[opObj.length] = TemOption; //添加到列表
}
}
//清除所有当前及后继option的列表内容
function clearlaterOP() {
var obj = document.getElementById(OptionsName)
var nOp = Number(obj.id.substr(obj.id.length - 1, 1));
for (i = nOp; i <= 3; i++) {
var opTemp = document.getElementById("op" + i);
opTemp.length = 0;
}
}
//option的onchange事件
function OpSelectChange(obj) {
obj.value = obj.options[obj.selectedIndex].value;
OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) + 1); //自动确定下一option的id号，为添加选项作准备
getNextOptions(obj.value);
}
</script>OptionServer.asp: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><%
response.Charset="utf-8"
Response.ContentType = "text/HTML"
ParentID=Trim(Request("parentid"))
Set Conn=Server.CreateObject("ADODB.Connection")
Connstr="DBQ="+server.mappath("area.mdb")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
Conn.Open Connstr
Set Rs=Server.CreateObject("ADODB.Recordset")
if ParentID="" then
sql="select text,code from area where Parentcode is null"
else
sql="select text,code from area where Parentcode='"&ParentID&"'"
end if
rs.open sql,conn,1,1
str="["
do while not rs.eof
str=str & "{'title':'" & rs("text") & "','value':'" & rs("code") & "'},"
rs.moveNext
loop
str=left(str,len(str)-1)+"]"
Response.Write(str)
Rs.Close
Set Rs=Nothing
Conn.Close
Set Conn = Nothing
%>实现过程： 1、当某个下拉列表更改选定时，会触发onchange事件，代码中用function OpSelectChange(obj)来处理该事件，主要做两件事，一是根据当前下拉列表的ID号，确定下级下拉列表的id号，并填入变量OptionsName；二是调用getNextOptions(obj.value)向服务器发送请求。 2、function getNextOptions(obj.value）将当前下拉列表的选中值作为参数发送给optionServer.asp，其中定义了回调函数：function opcallback()。 3、服务器接收getNextOptions(obj.value）的传值，并以此值作为Parentcode，查询该值下的所有记录，并将记录组合成JSON格式的字符串。字串格式类似“[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]”。服务器处理完数据后，回调客户端opcallback()。 4、function opcallback()用request.responseText获取服务器传来的JSON字符串，将其它转换成JSON对象后，添加下级下拉列表项目。 困惑： 在代码调试过程中，曾遇到一些头疼的事情，主要是用JSON传中文字符的问题，开始调试时在OptionServer.asp文件头部并没有加<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>和Response.ContentType = "text/HTML"这两句。测试过程中，以Response.Write("[{'title':'北京','value':'100001'},{'title':'天津','value':'200001'}]")作为返回数据，在客户端能得到正确的数据，但用Response.Write("[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]")作为测试数据时，（三个汉字），在客户端显示的数据是“[{'title':'北京,'value':'100001'},{'title':'天津,'value':'200001'}]")”，“市”没有了，而且少了个“，”，导致无法转换成JSON对象。加入<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>和Response.ContentType = "text/HTML"，并将OptionServer.asp和index.html设置为utf-8代码格式，才能正常传值。对此百思不得其解，还请高人指点。
省/直辖市：<select style="width: 100px" id="op1" onchange="OpSelectChange(this)" name="op1"></select> 市：<select style="width: 100px" id="op2" onchange="OpSelectChange(this)" name="op2"></select> 县/区：<select style="width: 100px" id="op3" onchange="this.value=this.options[this.selectedIndex].value;" name="op3"></select>
<script language="javascript" type="text/javascript">
var request;
var OptionsName;
iniOptions();
//初始化第一个列表框
function iniOptions() {
OptionsName = "op1";
getNextOptions(""); //初始化第一个列表框
}
//创建求XMLHttpRequest对象
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("错误，无法请求XMLHttpRequest!");
}
//发送请求，获取下一个列表框的列表数据
//参数oValue为当前列表框的选中值，此值作为下一个列表框的parentID号
function getNextOptions(oValue) {
createRequest();
var url = "OptionServer.asp?parentid=" + oValue;
request.open("GET", url, true);
request.onreadystatechange = opcallback;
request.send(null);
}
//回调函数
function opcallback() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText; //获取服务器返回的JSON字串
addOptions(response); //添加option选项
} else
alert("status is " + request.status);
}
}
//添加option选项
function addOptions(str) {
var jsonObj = eval(str);// JSON字符串转JSON对象
var opObj = document.getElementById(OptionsName);
clearlaterOP();
for (i = 0; i < jsonObj.length; i++) {
var TemOption = new Option(jsonObj[i].title, jsonObj[i].value); //定义一个选项对象
if (i==0) TemOption.selected = "selected"; //设定第一项为被选项
opObj[opObj.length] = TemOption; //添加到列表
}
}
//清除所有当前及后继option的列表内容
function clearlaterOP() {
var obj = document.getElementById(OptionsName)
var nOp = Number(obj.id.substr(obj.id.length - 1, 1));
for (i = nOp; i <= 3; i++) {
var opTemp = document.getElementById("op" + i);
opTemp.length = 0;
}
}
//option的onchange事件
function OpSelectChange(obj) {
obj.value = obj.options[obj.selectedIndex].value;
OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) + 1); //自动确定下一option的id号，为添加选项作准备
getNextOptions(obj.value);
}
</script>OptionServer.asp: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><%
response.Charset="utf-8"
Response.ContentType = "text/HTML"
ParentID=Trim(Request("parentid"))
Set Conn=Server.CreateObject("ADODB.Connection")
Connstr="DBQ="+server.mappath("area.mdb")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
Conn.Open Connstr
Set Rs=Server.CreateObject("ADODB.Recordset")
if ParentID="" then
sql="select text,code from area where Parentcode is null"
else
sql="select text,code from area where Parentcode='"&ParentID&"'"
end if
rs.open sql,conn,1,1
str="["
do while not rs.eof
str=str & "{'title':'" & rs("text") & "','value':'" & rs("code") & "'},"
rs.moveNext
loop
str=left(str,len(str)-1)+"]"
Response.Write(str)
Rs.Close
Set Rs=Nothing
Conn.Close
Set Conn = Nothing
%>实现过程： 1、当某个下拉列表更改选定时，会触发onchange事件，代码中用function OpSelectChange(obj)来处理该事件，主要做两件事，一是根据当前下拉列表的ID号，确定下级下拉列表的id号，并填入变量OptionsName；二是调用getNextOptions(obj.value)向服务器发送请求。 2、function getNextOptions(obj.value）将当前下拉列表的选中值作为参数发送给optionServer.asp，其中定义了回调函数：function opcallback()。 3、服务器接收getNextOptions(obj.value）的传值，并以此值作为Parentcode，查询该值下的所有记录，并将记录组合成JSON格式的字符串。字串格式类似“[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]”。服务器处理完数据后，回调客户端opcallback()。 4、function opcallback()用request.responseText获取服务器传来的JSON字符串，将其它转换成JSON对象后，添加下级下拉列表项目。 困惑： 在代码调试过程中，曾遇到一些头疼的事情，主要是用JSON传中文字符的问题，开始调试时在OptionServer.asp文件头部并没有加<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>和Response.ContentType = "text/HTML"这两句。测试过程中，以Response.Write("[{'title':'北京','value':'100001'},{'title':'天津','value':'200001'}]")作为返回数据，在客户端能得到正确的数据，但用Response.Write("[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]")作为测试数据时，（三个汉字），在客户端显示的数据是“[{'title':'北京,'value':'100001'},{'title':'天津,'value':'200001'}]")”，“市”没有了，而且少了个“，”，导致无法转换成JSON对象。加入<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>和Response.ContentType = "text/HTML"，并将OptionServer.asp和index.html设置为utf-8代码格式，才能正常传值。对此百思不得其解，还请高人指点。
