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

最新推荐文章于 2021-07-20 12:03:33 发布

sunxylove

最新推荐文章于 2021-07-20 12:03:33 发布

阅读量812

点赞数

转自：http://blog.csdn.net/u011955534/article/details/16114145

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

jsp页面：

[html] view plain copy

<%@ 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代码：

[java] view plain copy

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();
}
}
}

sunxylove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX解析json之下拉框二级联动

转自：http://blog.csdn.net/u011955534/article/details/16114145实现省、市二级联动，当选择某一省时，改省下面的市就会在另一个下拉框显示出来。在本例中AJAX通过解析json文件得到的数据传回到jsp页面，其中省市均是从数据库取到的值：jsp页面：[html] view plaincopy%@ page l
复制链接

扫一扫