ajax josn 城市

<div id="demo"></div>
省/直辖市：<select style=" 100px" id="op1" onchange="OpSelectChange(this)" name="op1"></select> 市：<select style=" 100px" id="op2" onchange="OpSelectChange(this)" name="op2"></select> 县/区：<select style=" 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格式的字符串。字串格式类似&#8220;[{'title':'北京市','value':'100001'},{'title':'天津市','value':'200001'}]&#8221;。服务器处理完数据后，回调客户端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'}]")作为测试数据时，（三个汉字），在客户端显示的数据是&#8220;[{'title':'北京,'value':'100001'},{'title':'天津,'value':'200001'}]")&#8221;，&#8220;市&#8221;没有了，而且少了个&#8220;，&#8221;，导致无法转换成JSON对象。加入<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>和Response.ContentType = "text/HTML"，并将OptionServer.asp和index.html设置为utf-8代码格式，才能正常传值。对此百思不得其解，还请高人指点。