AJAX省市县三级联动
效果
开发结构参考AJAX,JSON用户校验
主要有两个核心文件
1，处理输入字符，进行后台搜索的servlet
linkage.java
package org.guangsoft.servlet; import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.guangsoft.bean.Address;
import org.guangsoft.dao.SqlHelper; import com.google.gson.Gson; public class Linkage extends HttpServlet
{ public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
processRequest(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
processRequest(request, response);
} protected void processRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException
{
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
PrintWriter out = response.getWriter();
String provinceNo = request.getParameter("provinceNo");
String cityNo = request.getParameter("cityNo");
Connection connection = null;
PreparedStatement prepareStatement = null;
ResultSet resultSet = null;
try
{
String sql = "";
connection = SqlHelper.getConnection();
if(cityNo != null && cityNo != "")
{
sql = "select code,name from area where citycode = ?";
prepareStatement = connection.prepareStatement(sql);
prepareStatement.setString(1,cityNo);
}
else if(provinceNo != null && provinceNo != "")
{
sql = "select code,name from city where provincecode = ?";
prepareStatement = connection.prepareStatement(sql);
prepareStatement.setString(1,provinceNo);
}
else
{
sql = "select code,name from province";
prepareStatement = connection.prepareStatement(sql);
} resultSet = prepareStatement.executeQuery();
List<Address> addrList = new ArrayList<Address>();
while(resultSet.next())
{
Address address = new Address();
address.setAreaNo(resultSet.getString("code"));
address.setAreaName(resultSet.getString("name"));
addrList.add(address);
}
Gson gson = new Gson();
response.getWriter().print(gson.toJson(addrList));
}
catch(Exception e)
{
e.printStackTrace();
}
finally
{
SqlHelper.close(connection, prepareStatement, resultSet);
}
} }
2，展示前台
linkage.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%>">
<script src="/ajax/js/AjaxUtil.js"></script>
<script>
function getProvince()
{
sendAjaxReq("get","linkage",null,function(data)
{
eval("var addrList="+data);
var province = document.getElementById("province");
for(var i = 0; i < addrList.length; i++)
{
var address = addrList[i];
province.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>";
}
});
}
function getCity(provinceNo)
{
sendAjaxReq("get","/ajax/linkage?provinceNo="+provinceNo,null,function(data)
{
eval("var addrList="+data);
var city = document.getElementById("city");
city.innerHTML="<option value='0'>---请选择---</option>";
for(var i = 0; i < addrList.length; i++)
{
var address = addrList[i];
city.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>";
}
});
}
function getArea(cityNo)
{
sendAjaxReq("get","/ajax/linkage?cityNo="+cityNo,null,function(data)
{
eval("var addrList="+data);
var area = document.getElementById("area");
area.innerHTML="<option value='0'>---请选择---</option>";
for(var i = 0; i < addrList.length; i++)
{
var address = addrList[i];
area.innerHTML += "<option value="+address.areaNo+">"+address.areaName+"</option>";
}
});
}
</script>
</head> <body onload="getProvince();">
省：<select id="province" onchange="getCity(this.value);">
<option value="0">---请选择---</option>
</select>
市：<select id="city" onchange="getArea(this.value);">
<option value="0">---请选择---</option>
</select>
区：<select id="area">
<option value="0">---请选择---</option>
</select>
</body>
</html>
开发截图
AJAX省市县三级联动的更多相关文章
- AJAX省市县三级联动的实现
省市县数据 本例子中省市县数据保存在MySQL数据库中,部分数据截图如下: 从数据库中读取数据 导入需要的jar包 连接池配置文件 <c3p0-config> <!-- 默认配置,如 ...
- jquery+php+mysql实现Ajax省市县三级联动
1.第一步建立一个html页面的,放置省.市.县三个select选择框,代码如下: <!DOCTYPE html> <html> <head> <title& ...
- php仿经典省市县三级联动
之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...
- 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
- jQuery - 全国省市县三级联动
最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...
- wex5 实战 省市县三级联动与地址薄同步
无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2: 地址薄选项,利用inputSel ...
- 省市县三级联动 sql语句
发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...
- Android 省市县 三级联动（android-wheel的使用）[转]
转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...
- Android 省市县 三级联动（android-wheel的使用）
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...
随机推荐
- NOIP2008普及组题解
NOIP2008普及组题解 从我在其他站的博客直接搬过来的 posted @ 2016-04-16 01:11 然后我又搬回博客园了233333 posted @ 2016-06-05 19:19 T ...
- MySQL 中 where id in (1,2,3,4,...) 的效率问题讨论
MySQL ACMAIN_CHM06-26 16:36 等级 84次回复 [求证&散分]MySQL 中 where id in (1,2,3,4,...) 的效率问题讨论 庆祝本月大版得 ...
- MySQL 存储过程传参之in, out, inout 参数用法
存储过程传参:存储过程的括号里,可以声明参数. 语法是 create procedure p([in/out/inout] 参数名 参数类型 ..) in :给参数传入值,定义的参数就得到了值 ou ...
- 分布式缓存BeIT Memcached简介（转载）
或许你还没有用到过分布式缓存,在web集群的情况下,它可以很好的让一部分常用数据常驻服务器内存而不用担心各台web不同步.下 面稍微介绍一下beitmemcached对于.net的支持,官方参考htt ...
- 把Linux安装到移动硬盘上
把Linux安装到移动硬盘上 转载于:http://mrkh.me/install-linux-on-a-portable-hard-drive.html 这一篇文章讲一下,怎么把linux安装到移动 ...
- 最新 DEDECMS SQL 注入 0day
4月29日消息:国内安全研究团队“知道创宇”称截获到最新DEDECMS SQL注入0day,DEDECMS官网目前提供下载的最新版5.7也受影响,截止本告警发出时官方尚未给出补丁或解决方案,此漏洞利用 ...
- unity3d web.config设置
原地址:http://www.cnblogs.com/88999660/archive/2013/03/22/2976105.html <?xml version="1.0" ...
- 用poi框架进行批量导入导出实例
Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程式对Microsoft Office格式档案读和写的功能.我们这里使用poi对数据库中的数据进行批量导出,以及 ...
- KMP算法精髓
这个算法的做法就是在部分匹配的时候,常规想法是向后移动一位,但是KMP想法是向后移动n位(n=m-L). 注释:这里m表示已经匹配了的字符的个数,L表示已经匹配了的那些字符组成的这个字符串的前缀和后缀 ...
- 暑假热身 A. GCC
GCC编译器是一个由GNU项目维护的编译系统,它支持多种编程语言的编译.但是它并不包含数学运算符“!”.在数学中,这个符号代表阶乘.表达式n!的意思是从1到n的所有整数的乘积. 例如,4!=4*3*2 ...