本文主要是介绍AJAX解析json之 下拉框 二级联动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个例子跟上次写的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 οnlοad="getsheng()">省：<select name="sheng" id="sheng" οnchange="getcity()"><option>请选择</option></select>市：<select name="city" id="city"></select></body>
</html>
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之 下拉框 二级联动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
