• 城市四级联动,js和jquery对ajax的支持结合html,json


                                                                     jdbc工具类

                                                         

    public class JdbcUtils {

    public static BasicDataSource bs=null;

    static{
    Properties p = new Properties();
    try {
    p.load(JdbcUtils.class.getClassLoader().getResourceAsStream("properties/MysqlConfig.properties"));
    bs= new BasicDataSource();
    bs.setUsername(p.getProperty("username"));
    bs.setPassword(p.getProperty("password"));
    bs.setUrl(p.getProperty("url"));
    bs.setDriverClassName(p.getProperty("className"));
    bs.setMaxActive(Integer.parseInt(p.getProperty("MaxActive")));
    bs.setInitialSize(Integer.parseInt(p.getProperty("initSize")));
    bs.setMaxWait(Long.parseLong(p.getProperty("maxWait")));
    } catch (Exception e) {
    e.printStackTrace();
    System.out.println("文件加载失败");
    }

    }

    public static DataSource getDataSource(){

    return bs;

    }


    }

    数据库配置文件:

    username=root
    password=123456
    MaxActive=5
    url=jdbc:mysql:///city
    className=com.mysql.jdbc.Driver
    maxWait=5000
    initSize=3

    实体类

    public class Os_district {
    private int id;
    private String name;
    private int level;
    private int upid;
    public Os_district() {
    super();
    // TODO Auto-generated constructor stub
    }
    public Os_district(int id, String name, int level, int upid) {
    super();
    this.id = id;
    this.name = name;
    this.level = level;
    this.upid = upid;
    }
    public int getId() {
    return id;
    }
    public void setId(int id) {
    this.id = id;
    }
    public String getName() {
    return name;
    }
    public void setName(String name) {
    this.name = name;
    }
    public int getLevel() {
    return level;
    }
    public void setLevel(int level) {
    this.level = level;
    }
    public int getUpid() {
    return upid;
    }
    public void setUpid(int upid) {
    this.upid = upid;
    }
    @Override
    public int hashCode() {
    final int prime = 31;
    int result = 1;
    result = prime * result + id;
    result = prime * result + level;
    result = prime * result + ((name == null) ? 0 : name.hashCode());
    result = prime * result + upid;
    return result;
    }
    @Override
    public boolean equals(Object obj) {
    if (this == obj)
    return true;
    if (obj == null)
    return false;
    if (getClass() != obj.getClass())
    return false;
    Os_district other = (Os_district) obj;
    if (id != other.id)
    return false;
    if (level != other.level)
    return false;
    if (name == null) {
    if (other.name != null)
    return false;
    } else if (!name.equals(other.name))
    return false;
    if (upid != other.upid)
    return false;
    return true;
    }
    @Override
    public String toString() {
    return "Os_district [id=" + id + ", name=" + name + ", level=" + level
    + ", upid=" + upid + "]";
    }

    }

                                                                        Servlet

    public class DoServlet extends HttpServlet {

    public void service(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html;charset=utf-8");
    String path = request.getRequestURI();
    path = path.substring(path.lastIndexOf("/"), path.lastIndexOf("."));
    CityDaoImpl city = new CityDaoImpl();
    PrintWriter out = response.getWriter();
    if ("/Province".equals(path)) {
    try {
    JSONArray jsonProcince = JSONArray.fromObject(city
    .findAllProvince());
    out.println(jsonProcince);

    } catch (Exception e) {
    e.printStackTrace();
    }
    }

    if ("/City".equals(path)) {
    int id = Integer.parseInt(request.getParameter("id"));
    try {
    JSONArray jsonCity = JSONArray.fromObject(city.findAllByID(id));
    out.println(jsonCity);
    } catch (Exception e) {
    e.printStackTrace();
    }
    }

    if ("/Xian".equals(path)) {
    int id = Integer.parseInt(request.getParameter("id"));
    try {
    JSONArray jsonXian = JSONArray.fromObject(city.findAllByID(id));
    out.println(jsonXian);
    } catch (Exception e) {
    e.printStackTrace();
    }
    }

    if ("/Xiang".equals(path)) {
    int id = Integer.parseInt(request.getParameter("id"));
    try {
    JSONArray jsonXiang = JSONArray
    .fromObject(city.findAllByID(id));
    out.println(jsonXiang);
    } catch (Exception e) {
    e.printStackTrace();
    }
    }

    }

    }

                                                          City.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <!--<script type="text/javascript" src="js/my.js"></script>-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    /* function province(){
    var xhr = getXhr();
    //alert(xhr);
    $('province').innerHTML='';
    xhr.open('get','Province.do',true);
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
    var text=xhr.responseText;
    var jsontext = JSON.parse(text);
    for(var i=0;i<jsontext.length;i++){
    var option = document.createElement("OPTION");
    //alert(jsontext[i].name);
    //option.text=jsontext[i].name;
    option.text=jsontext[i].name;
    option.value=jsontext[i].id;
    //alert(jsontext[i].name);
    $("province").options.add(option);
    }
    }
    };
    xhr.send(null);

    }
    function provinceChange(id){

    //alert(code);
    var xhr = getXhr();
    //alert(xhr);
    $('city').innerHTML='';
    $('xian').innerHTML='';
    $('xiang').innerHTML='';
    xhr.open('get','City.do?id='+id,true);
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
    var text=xhr.responseText;
    var jsontext = JSON.parse(text);
    for(var i=0;i<jsontext.length;i++){
    var option = document.createElement("OPTION");

    option.text=jsontext[i].name;
    option.value=jsontext[i].id;
    //alert(jsontext[i].name);
    $("city").options.add(option);
    }
    }
    };
    xhr.send(null);

    }

    function cityChange(id){

    //alert(cityCode);
    var xhr = getXhr();
    //alert(xhr);
    $('xian').innerHTML='';
    $('xiang').innerHTML='';
    xhr.open('get','Xian.do?id='+id,true);
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
    var text=xhr.responseText;
    //alert(text);
    var jsontext = JSON.parse(text);
    //alert(jsontext);
    for(var i=0;i<jsontext.length;i++){
    var option = document.createElement("OPTION");
    option.text=jsontext[i].name;
    option.value=jsontext[i].id;
    //alert(jsontext[i].name);
    $("xian").options.add(option);
    }
    }
    };
    xhr.send(null);

    }

    function xianChange(id){

    //alert(cityCode);
    var xhr = getXhr();
    //alert(xhr);
    $('xiang').innerHTML='';
    xhr.open('get','Xiang.do?id='+id,true);
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4&&xhr.status==200){
    var text=xhr.responseText;
    //alert(text);
    var jsontext = JSON.parse(text);
    //alert(jsontext);
    for(var i=0;i<jsontext.length;i++){
    var option = document.createElement("OPTION");
    option.text=jsontext[i].name;
    option.value=jsontext[i].id;
    //alert(jsontext[i].name);
    $("xiang").options.add(option);
    }
    }
    };
    xhr.send(null);

    } */

    $(function(){

    $.ajax({
    'url': 'Province.do?',
    'type':'get',
    'dataType':'json',
    'success':function(data){

    for(var i=0;i<data.length;i++){
    $('#province').append("<option value="+data[i].id+">"+data[i].name+"</option>");
    }
    },
    'async':false
    })

    $('#province').change(function(){
    $('#city').html("<option>-----请选择城市-----</option>");
    $('#xian').html("<option>-----请选择县区-----</option>");
    $('#xiang').html("<option>-----请选择乡镇-----</option>");
    var $obj = $(this).val();
    //alert($obj)
    $.ajax({
    'url':'City.do',
    'data':{'id':$obj},
    'dataType':'json',
    'success':function(data){
    for(var i=0;i<data.length;i++){
    $('#city').append("<option value="+data[i].id+">"+data[i].name+"</option>");
    }
    }
    })
    })

    $('#city').change(function(){

    $('#xian').html("<option>-----请选择县区-----</option>");
    $('#xiang').html("<option>-----请选择乡镇-----</option>");
    var $obj = $(this).val();
    //alert($obj)
    $.ajax({
    'url':'Xian.do',
    'data':{'id':$obj},
    'dataType':'json',
    'success':function(data){
    for(var i=0;i<data.length;i++){
    $('#xian').append("<option value="+data[i].id+">"+data[i].name+"</option>");
    }
    }
    })
    })


    $('#xian').change(function(){

    $('#xiang').html("<option>-----请选择乡镇-----</option>");
    var $obj = $(this).val();
    //alert($obj)
    $.ajax({
    'url':'Xiang.do',
    'data':{'id':$obj},
    'dataType':'json',
    'success':function(data){
    for(var i=0;i<data.length;i++){
    $('#xiang').append("<option value="+data[i].id+">"+data[i].name+"</option>");
    }
    }
    })
    })


    })



    </script>
    <body align='center' style='top:200px'>
    <p><b>城市四级联动</b></p>
    <select id="province" >
    <option id="p1">==请选择省份==</option>
    </select>
    <select id="city" >
    <option>==请选择城市==</option>
    </select>
    <select id="xian" >
    <option>==请选择县区==</option>
    </select>
    <select id="xiang">
    <option>==请选择乡镇==</option>
    </select>
    </body>
    </html>

                     

  • 相关阅读:
    2-5
    2-3
    2-2
    2-1
    1-1
    实验6-1 求数组及其下标
    实验4-2 关于求阶乘的运算
    作业 3-5 switch语句的应用
    作业3-6 查询水果单价
    作业3-4 判断是不是闰年
  • 原文地址:https://www.cnblogs.com/lingl/p/8799357.html
Copyright © 2020-2023  润新知