AJAX解析json之下拉框二级联动

来源：互联网发布：网络订的机票怎么取编辑：程序博客网时间：2024/06/05 15:57

这个例子跟上次写的ajax解析xml实现的效果是一样的！

是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析json文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值：

jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  </head>  <script type="text/javascript">   var xmlHttp=null;   //创建xmlhttprequest对象   if(window.XMLHttpRequest){  xmlHttp=new XMLHttpRequest();  }else{  xmlHttp=new ActiveObject("Microsoft.XMLHTTP");  }  var url="JsonGetP?time="+new Date().getTime();  function getsheng(){  xmlHttp.open("post",url,true);  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  xmlHttp.send();  xmlHttp.onreadystatechange=getprovince;  }  function getprovince(){  if(xmlHttp.readyState==4 && xmlHttp.status==200){  //alert(xmlHttp.responseText);  var proText=xmlHttp.responseText;  var pro=eval("("+proText+")");  //alert(pro[1].province);  var pselect=document.getElementById("sheng");  for(var i=0;i<pro.length;i++){  pselect.options.add(new Option(pro[i].province,pro[i].shorter));  }  }  }  function getcity(){  xmlHttp.open("post",url,true);  xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  var province=document.getElementById("sheng").value;  //alert("省："+province);  xmlHttp.send("province="+province);  xmlHttp.onreadystatechange=setcity;  }  function setcity(){  if(xmlHttp.readyState==4 && xmlHttp.status==200){  var city=document.getElementById("city");  city.options.length=0;  var cityText=xmlHttp.responseText;  //alert(cityText);  var ct=eval("("+cityText+")");  //alert(ct[1].cityname);  for(var i=0;i<ct.length;i++){  var cityname=ct[i].cityname;  //alert(cityname);  city.options.add(new Option(cityname,cityname));  }    }  }  </script>  <body onload="getsheng()">    省：<select name="sheng" id="sheng" onchange="getcity()">    <option>请选择</option>    </select>    市：<select name="city" id="city">        </select>  </body></html>

servlet代码：

public class JsonGetP extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");String province = request.getParameter("province");if (province != null) {sendCity(request, response, province);} else {ShengDao sd = new ShengDao();List<Sheng> list = sd.selAll();response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();response.setContentType("text/xml");out.print("[");for (Sheng sheng : list) {JSONObject jsonobj=JSONObject.fromObject(sheng);String str=jsonobj.toString();out.print(str+",");out.println();}out.print("]");}}public void sendCity(HttpServletRequest request,HttpServletResponse response, String shorter) {try {request.setCharacterEncoding("utf-8");} catch (UnsupportedEncodingException e1) {e1.printStackTrace();}try {response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();response.setContentType("text/html");ShengDao sd = new ShengDao();out.print("[");List<City> list = sd.selAll(shorter);for (City city : list) {JSONObject jsonobj=JSONObject.fromObject(city);String str=jsonobj.toString();out.print(str+",");out.println();}out.print("]");} catch (IOException e) {e.printStackTrace();}}}

AJAX解析json之 下拉框 二级联动

AJAX解析json之下拉框二级联动