效果

开发结构参考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这个 ...

随机推荐

【BZOJ-4407】于神之怒加强版莫比乌斯反演 + 线性筛
4407: 于神之怒加强版 Time Limit: 80 Sec Memory Limit: 512 MBSubmit: 241 Solved: 119[Submit][Status][Discu ...
Matlab最短路径问题记录
利用graphshortestpath 可以求最短路径,具体用法参考MATLAB帮助 S=[1 1 2 2 3 3 4 4 4 4 5 6 6 7 8]; %起始节点向量 E=[2 3 5 4 4 6 ...
Laravel 5.3 中文文档翻译完成
经过一个多月的紧张翻译和校对,翻译完成.以下是参与人员: Laravel 5.3 中文文档翻译完成稿源:七星互联www . qixoo.com 文档地址在此:https://laravel-chin ...
eclipse中Preferences的一些设置
1.在Eclipse里面设置了java文件保存时自动格式化,在java->Code Style->Formatter里设置了自定义的格式化的样式,这样每次保存后都会自动格式化代码,用了一段 ...
javascript判断文件大小
<input type="file" id="fileName" name ="fileName" onchange="Ge ...
2个比较经典的PHP加密解密函数分享
项目中有时我们需要使用PHP将特定的信息进行加密,也就是通过加密算法生成一个加密字符串,这个加密后的字符串可以通过解密算法进行解密,便于程序对解密后的信息进行处理. 最常见的应用在用户登录以及一些AP ...
运用加密技术保护Java源代码/定制ClassLoader
为什么要加密? 对于传统的C或C++之类的语言来说,要在Web上保护源代码是很容易的,只要不发布它就可以.遗憾的是,Java程序的源代码很容易被别人偷看.只要有一个反编译器,任何人都可以分析别人的代码 ...
HttpApplication的处理管道19个事件。
HttpApplication对象是由Asp.net帮助我们创建的,它是asp.net中处理请求的重要对象.为了便于扩展,HttpApplication采用处理管道的方式进行处理,将处理的步骤分为多个 ...
C++中析构函数的作用，
如果构造函数打开了一个文件,最后不需要使用时文件就要被关闭.析构函数允许类自动完成类似清理工作,不必调用其他成员函数.析构函数也是特殊的类成员函数.简单来说,析构函数与构造函数的作用正好相反,它用来完 ...
javascript 快速排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

AJAX省市县三级联动

效果

开发结构参考AJAX,JSON用户校验

主要有两个核心文件

1，处理输入字符，进行后台搜索的servlet

2，展示前台

开发截图

AJAX省市县三级联动的更多相关文章

随机推荐

热门专题