您的位置：首页 > 其它

AJAX实现简单的省市二级联动

2011-12-13 10:40 751 查看

基本思路：前台的下拉框值改变时，AJAX将值传入后台的servlet进行处理，根据不同的值返回不同的JSON数据，然后前台进行解析成字符数组，添加到option中.

index.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>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var xmlHttpRequest;
function createXmlHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getCity(value) {
createXmlHttpRequest();
xmlHttpRequest.open("POST", "cityAction?value="+value,true); //将value传递到后台的servlet
xmlHttpRequest.onreadystatechange = showMsgCallback;
xmlHttpRequest.send(null);
}

function showMsgCallback() {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.status == 200) {
var str = eval("("+xmlHttpRequest.responseText+")"); //JSON格式转换为字符数组
if(str!=null&&str!=""){
document.getElementById("city").options.length=0;    //将原有的选项清空
document.getElementById("city").options.add(new Option("--选择"));
for(var i=0;i<str.length;i++){  //遍历数组
var option = document.createElement("option");   //创建一个 option
option.text = str[i];  //设置显示的值
option.value = str[i]; //设置value属性值
document.getElementById("city").options.add(option);   //将新建的option添加到select中
}
}else{
document.getElementById("city").options.length=0;
document.getElementById("city").options.add(new Option("--选择"));
}

}
}
}
</script>
</head>
<body>
省:
<select onchange="getCity(this.value)">
<option>
--选择
</option>
<option value="北京">
北京
</option>
<option value="深圳">
深圳
</option>
<option value="河南">
河南
</option>
</select>
城市:
<select id="city">
<option>
--选择
</option>
</select>
</body>
</html>

Servlet: CityAction.java

package com.org;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CityAction extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String province = request.getParameter("value");
StringBuffer buf = new StringBuffer("[");
//数据只是测试   通常是从数据库中取出数据
if("北京".equals(province)){
buf.append("\"").append("海淀").append("\"").append(",");
buf.append("\"").append("朝阳").append("\"").append(",");
buf.append("\"").append("昌平").append("\"").append(",");
buf.append("\"").append("大兴").append("\"");
buf.append("]");
out.print(buf);
System.out.println(buf);
}else if("深圳".equals(province)){
buf.append("\"").append("福田").append("\"").append(",");
buf.append("\"").append("罗湖").append("\"").append(",");
buf.append("\"").append("南山").append("\"").append(",");
buf.append("\"").append("盐田").append("\"");
buf.append("]");
out.print(buf);
System.out.println(buf);
}else if("河南".equals(province)){
buf.append("\"").append("郑州").append("\"").append(",");
buf.append("\"").append("新乡").append("\"").append(",");
buf.append("\"").append("洛阳").append("\"").append(",");
buf.append("\"").append("商丘").append("\"");
buf.append("]");
out.print(buf);
System.out.println(buf);
}else{
out.print("[\"\"]");
}
System.out.println(province+"******");
out.flush();
out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doGet(request, response);
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航