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

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

是实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析json文件得到的数据传回到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","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,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之下拉框二级联动