servlet+jsp/js二种实现方式:三级联动(附加demo代码)

V_1.0 准备工作:
   #1.创建表 [城市信息表]  [行政区信息表]

   create table city(
      cid  int,
      cname varchar(200),
      pid  int
   );

   create table qu(
     qid   int,
     qname varchar(200),
     cid  int
   );
  2.制造测试数据
     insert into city values(1,"北京市",1); 
     insert into city values(2,"廊坊市",1);
     insert into city values(3,"沈阳市",2);
     insert into city values(4,"大连市",2);
     
     insert into qu values(1,"海淀区",1);
     insert into qu values(2,"廊坊区",2);
     insert into qu values(3,"皇姑区",3);
     insert into qu values(4,"甘井子区",4);
     
   3.制造实体类   
V_2.0 省市级联
     1. index.jsp  添加findCity,用于将用户选择【省编号】通过代理对象发送到服务器端,
        并接受结果,填充城市下拉列表
     2. CityFindServlet:
                     1. 获得【省编号】
                     2. JDBC获得当前省拥有的所有的城市信息
                     3. 将【城市信息】交给【代理对象】
V_3.0 如何将JAVA中高级类型数据交给代理对象进行编译:
   1.所有的编程语言,都拥有8中基本数据类型:
             编程语言都需要在内存中运行,运行期间涉及的数据特征就必须符合内存条的要求。
             所有内存厂商,都只支持8中基本数据类型
   2.不同编程语言的基本数据类型,彼此之间是可以直接相互编译                
   3.由于不同编程语言描述各自高级类型时,使用描述方式是不同的,因此
                不同编程语言之间高级类型是无法直接编译
   4.javascript如何描述一个对象:JSON形式
         var cityObj ={cid:"1",cname:"北京",pid:"1"}
   5. java如何描述一个对象
         City  city = new City();
         city.cid =1;
         city.cname="北京"                  
   6. 为了能够让【代理对象】正确编译高级类型
                    在服务器端,将JAVA修饰对象格式转变为JSON形式格式
V_3.1 城市和行政区下拉列表级联:与省市级联完全一致
V_4.0 如何实现真正三表级联:
  1.上述的两个功能中,都是读取当前下拉表中选中<option>来获得隶属于当前数据的内容 
  2.浏览器加载下拉列表时,默认情况将下拉列表中第一个<option>作为默认选中项。
            浏览器将当前<option value>自动赋值给当前的下拉列表

代码:

欢迎页面:index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
     <script type="text/javascript">
     
       function findCity(){
         var pid = document.getElementById("province").value;  
         if(pid==0){
            alert("请选择具体的省");
            return;
         }
       
         // 1. 获得当前浏览器【代理对象】
        var xmlHttp = new XMLHttpRequest();
        // 2.初始化【代理对象】           
        xmlHttp.open("get","/city/find.do?pid="+pid,true);
        // 3.通知【代理对象】发送请求
        xmlHttp.send();
        // 4.实时监控【代理对象】工作状态,决定何时读取服务器端返回的数据
        xmlHttp.onreadystatechange = function (){
                                                   if(xmlHttp.readyState == 4){
         // 5...........................................获得服务器端的数据   
                                                        var jsonData =  xmlHttp.responseText; //json形式的字符串 "[{},{}]"
                                                        //alert("jsonData "+jsonData);
                                                        // 将JSON形式字符串,转换成一个真正的JSON形式对象
                                                        //  eval()
                                                        var jsonObj = eval("{"+jsonData+"}");//[cid:xx,cname:xx;cid:xx,cname:xx]
                                                       // alert("jsonObj "+jsonObj);
                                                        //将返回的数据,填充到城市下拉列表--------------start
                                                             //1.将当前城市下拉列表原有的<option>销毁掉
                                                             document.getElementById("city").options.length = 0;
                                                             //2.将新的数据,生成<option>,并填充到下拉列表
                                                             for(var i=0;i<jsonObj.length;i++){
                                                                  //jsonObj[i].cid
                                                                  //jsonOjb[i].cname
                                                                  //<option value="xxx">显示内容</option>
                                                                  //var optionObj = new Option(显示内容,value);
                                                                  var optionObj = new Option(jsonObj[i].cname,jsonObj[i].cid);
                                                                   document.getElementById("city").options.add(optionObj);
                                                             }
                                                        //将返回的数据,填充到城市下拉列表--------------end                                    
                                                        //此时城市下拉列表中,已经有了value,就将这个value发送到服务器端,获得当前城市拥有的行政区
                                                          findQu();
                                                   }
                                                };
       }
       //根据城市编号,查询对应行政区
       function findQu(){
          var cid = document.getElementById("city").value;  
         if(cid==0){
            alert("请选择具体的城市");
            return;
         }
       
         // 1. 获得当前浏览器【代理对象】
        var xmlHttp = new XMLHttpRequest();
        // 2.初始化【代理对象】           
        xmlHttp.open("get","/qu/find.do?cid="+cid,true);
        // 3.通知【代理对象】发送请求
        xmlHttp.send();
        // 4.实时监控【代理对象】工作状态,决定何时读取服务器端返回的数据
        xmlHttp.onreadystatechange = function (){
                                                   if(xmlHttp.readyState == 4){
         // 5...........................................获得服务器端的数据   
                                                        var jsonData =  xmlHttp.responseText; //json形式的字符串 "[{},{}]"
                                                        //alert("jsonData "+jsonData);
                                                        // 将JSON形式字符串,转换成一个真正的JSON形式对象
                                                        //  eval()
                                                        var jsonObj = eval("{"+jsonData+"}");//[qid:xx,1name:xx;qid:xx,qname:xx]
                                                       // alert("jsonObj "+jsonObj);
                                                        //将返回的数据,填充到城市下拉列表--------------start
                                                             //1.将当前城市下拉列表原有的<option>销毁掉
                                                             document.getElementById("qu").options.length = 0;
                                                             //2.将新的数据,生成<option>,并填充到下拉列表
                                                             for(var i=0;i<jsonObj.length;i++){
                                                                  //jsonObj[i].cid
                                                                  //jsonOjb[i].cname
                                                                  //<option value="xxx">显示内容</option>
                                                                  //var optionObj = new Option(显示内容,value);
                                                                  var optionObj = new Option(jsonObj[i].qname,jsonObj[i].qid);
                                                                   document.getElementById("qu").options.add(optionObj);
                                                             }
                                                        //将返回的数据,填充到城市下拉列表--------------end                                    
                                                   }
                                                };
       }
     </script>
    <center>
       省<select id="province" onchange="findCity()">
       <option value="0">请选择</option>
       <option value="1">河北省</option> 
        <option value="2">辽宁省</option> 
     </select><br/>
    城市<select id="city" onchange="findQu()">
        <option value="0">请选择</option>
     </select> <br/>
  行政区<select id="qu">
        <option value="0">请选择</option>
     </select> <br/>   
     
    
    </center>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>CityFindServlet</servlet-name>
    <servlet-class>src.com.bjpowernode.action.CityFindServlet</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>QuFindServlet</servlet-name>
    <servlet-class>src.com.bjpowernode.action.QuFindServlet</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>CityFindServlet</servlet-name>
    <url-pattern>/city/find.do</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>QuFindServlet</servlet-name>
    <url-pattern>/qu/find.do</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

java代码1:

package src.com.bjpowernode.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
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 net.sf.json.JSONArray;
import src.com.bjpowernode.entity.City;



public class CityFindServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
             
             String sql="select * from city where pid=?";
             Connection con=null;
             PreparedStatement ps=null;
             ResultSet rs=null;
             List<City> cityList= new ArrayList<City>();
        
            String pid = request.getParameter("pid");
        
            try{
                 Class.forName("com.mysql.jdbc.Driver");
                 con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
                 ps = con.prepareStatement(sql);                
                 ps.setInt(1, Integer.valueOf(pid));
                 rs=ps.executeQuery();
            }catch(Exception ex){
                ex.printStackTrace();
            }
         
           try{
               while(rs.next()){
                    City city = new City();
                    city.setCid(rs.getInt("cid"));
                    city.setCname(rs.getString("cname"));
                    city.setPid(rs.getInt("pid"));
                    cityList.add(city);
                }
           }catch(Exception ex){
               ex.printStackTrace();
           }
        
           JSONArray jsonData=JSONArray.fromObject(cityList);
          // System.out.println(jsonData);
        
           response.setCharacterEncoding("utf-8");
           PrintWriter out=response.getWriter();
           out.print(jsonData); 
    }

}

java代码2:

package src.com.bjpowernode.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
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 net.sf.json.JSONArray;
import src.com.bjpowernode.entity.City;



public class CityFindServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
             String sql="select * from city where pid=?";
             Connection con=null;
             PreparedStatement ps=null;
             ResultSet rs=null;
             List<City> cityList= new ArrayList<City>();
            String pid = request.getParameter("pid");
            try{
                 Class.forName("com.mysql.jdbc.Driver");
                 con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root", "root");
                 ps = con.prepareStatement(sql);                
                 ps.setInt(1, Integer.valueOf(pid));
                 rs=ps.executeQuery();
            }catch(Exception ex){
                ex.printStackTrace();
            }
           try{
               while(rs.next()){
                    City city = new City();
                    city.setCid(rs.getInt("cid"));
                    city.setCname(rs.getString("cname"));
                    city.setPid(rs.getInt("pid"));
                    cityList.add(city);
                }
           }catch(Exception ex){
               ex.printStackTrace();
           }
           JSONArray jsonData=JSONArray.fromObject(cityList);
           response.setCharacterEncoding("utf-8");
           PrintWriter out=response.getWriter();
           out.print(jsonData); 
    }

}

jar包

下载链接:http://note.youdao.com/groupshare/?token=A15DB4EF63DA4FC78B1F53ADE63C8114&gid=27180369
  • mysql-connector-java-5.1.25.jar
  • json-lib-2.3-jdk15.jar
  • commons-collections-3.2.2.jar
  • commons-beanutils-1.3.jar
  • commons-lang-1.0.1.jar
  • ezmorph-1.0.2.jar
  • commons-logging-1.2.jar

搭建环境

  • eclipse
  • jdk1.8
  • jetty(服务器)
  • Dynamic Web Module 2.5

第二种js方式实现三级联动:

注意事项: 1、 需要引入jquery.js 插件。 2、特别值得注意的是:发送ajax的时候一定要加上dataType=“text”或者dataType=“html”。不加会出现浏览器解析的问题。如果不加 (1) 在Google Chrome中没有问题。 (2)在Firefox中不支持。返回的json数据会成了(Object xmlDocument)

$("#province").change(function(){
    var province = $("#province").val();
    loadCity(province);
    
})
 function loadCity(msg){
     $.ajax({
         url:"/city/find.do?",
         type:"post",
         data:{"pid":msg},
         dataType:'text',
         success:function(data){
             if (data == "[]") {
                    $("#city").empty();
                    $("<option value='0'>请输入城市</option>").appendTo($("#city"))
                  } else {
                    
                    $("#city").empty();
                    var data = JSON.parse(data);
//                  var data = eval("("+msg+")");
                    /*$("<option value='' selected='selected' >请选择市</option>").appendTo($("#district_id"));*/
                    for (var i = 0; i < data.length; i++) {
                      $("<option value='" + data[i].cid + "'>" + data[i].cname
                              + "</option>").appendTo($("#city"));
                    }
                    chushihua()
              }
         }
         
     });
 }
$("#city").change(function(){
    var province = $("#city").val();
    loadCity1(province);
    
})
function chushihua(){
    if($("#city").val()!=''){
        
        loadCity1($("#city").val())
    }
}

 function loadCity1(msg){
     $.ajax({
         url:"/qu/find.do",
         type:"post",
         data:{"cid":msg},
         dataType:'html',
         success:function(msg){
             if (msg == "[]") {
                    $("#qu").empty();
                    $("<option value='0'>请输入城市</option>").appendTo($("#qu"))
                  } else {
                    $("#qu").empty();
                    var data = eval("("+msg+")");
//                  data =  jQuery.parseJSON(msg);
                    /*$("<option value='' selected='selected' >请选择市</option>").appendTo($("#district_id"));*/
                    for (var i = 0; i < data.length; i++) {
                      $("<option value='" + data[i].qid + "'>" + data[i].qname
                              + "</option>").appendTo($("#qu"));
                    }
              }
         } 
     });
 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏岑玉海

Carbondata源码系列(一)文件生成过程

在滴滴的两年一直在加班,人也变懒了,就很少再写博客了,最近在进行Carbondata和hive集成方面的工作,于是乎需要对Carbondata进行深入的研究。 ...

5496
来自专栏Java Web

初学Java Web(9)——学生管理系统(简易版)总结

项目开始时间:2018年4月8日14:37:47 项目完成时间:2018年4月9日10:03:30 技术准备 这个项目是自己用于巩固 J2EE 相关知识的练...

5185
来自专栏Java成神之路

Java企业微信开发_05_消息推送之被动回复消息

微信加解密包 下载地址:http://qydev.weixin.qq.com/java.zip      ,此包中封装好了AES加解密方法,直接调用方法即可。

2502
来自专栏刘望舒

LeakCanary看这一篇文章就够了

LeakCanary是Square公司基于MAT开源的一个内存泄漏检测工具,在发生内存泄漏的时候LeakCanary会自动显示泄漏信息。

7805
来自专栏DOTNET

asp.net web api 下载之断点续传

一、基本思想 利用 HTTP 请求的Range标头值,来向服务端传递请求数据的开始位置和结束位置。服务端获得这两个参数后,将指定范围内的数据传递给客户端。当客户...

46312
来自专栏大前端_Web

easyUI组件datagrid的二次封装

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1743
来自专栏菩提树下的杨过

java学习:weblogic下JNDI及JDBC连接测试(weblogic环境)

JNDI的专业解释,大家自行去网络搜索吧,这里就不啰嗦了。 单纯从使用角度看,可以简称把它看成一个key-value的“哈希资源”容器。给定一个string类型...

2709
来自专栏何俊林

LeakCanary的原理,你知道么?

2182
来自专栏java一日一条

50个常见的 Java 错误及避免方法(第三部分)

当我们尝试调用带有错误参数的Java代码时,通常会产生此Java错误消息(@ghacksnews):

1283
来自专栏编码小白

tomcat请求处理分析(六)servlet的处理过程

1.1.1.1  servlet的解析过程 servlet的解析分为两步实现,第一个是匹配到对应的Wrapper,第二个是加载对应的servlet并进行数据,这...

6637

扫码关注云+社区