热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

SSH结合jquery实现三级联动效果

这篇文章主要为大家详细介绍了SSH结合jquery实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jquery实现三级联动的具体代码,供大家参考,具体内容如下

jsp页面部分:

 
  • 选择楼栋:
  • 选择住房:
  • js部分:

      function floor(){
    
        document.getElementById("build").options.length =0;
        document.getElementById("floot2").options.length =0;
        var parentId = document.getElementById("village").value;
    
        if(parentId == 0){
    
        }else{
          $.ajax({
            type : "post",
            url : "floor.action",
            data : {"parentId":parentId},
            dataType : "json",
            success :function(data){
    
              console.log(data);
              var len = data.length;
    
              var htm = "";
              for(var i=0;i"+data[i].info+"";
              }
    
              $("#build").append(htm);
            }
          })
        }
      }
    
      function floor2(){
        document.getElementById("floot2").options.length =0;
        var build = document.getElementById("build").value;
    
        if(build == 0){
    
        }else{
          $.ajax({
            type : "post",
            url : "floor2.action",
            data : {"parentId":build},
            dataType : "json",
            success : function(data){
              var len = data.length;
              var htm = "";
              for(var i=0;i"+data[i].info+"";
              }
              $("#floot2").append(htm);
            }
          })
        }
      }
    
    

    struts2配置部分:

    
        
          
            floor
          
        
    
        
          
            floor2
          
        
      
    
    

    action部分:

    public String floor(){
        System.out.println("这里是ajax调用");
        //floor = addressInfoService.getFloor(addressInfo.getParentId());
        System.out.println(addressInfo.getParentId());
        floor = addressInfoService.getFloor(addressInfo.getParentId());
        return SUCCESS;
      }
    
      public String floor2(){
        System.out.println("这里是ajax的第二次调用");
        System.out.println(addressInfo.getParentId());
        floor2 = addressInfoService.getBuild(addressInfo.getParentId());
        return SUCCESS;
      }
    
    

    最后,一定不要忘记导入struts2-json-plugin-2.3.15.1.jar 这个夹包的版本也要和struts2的其他的夹包的版本一致。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


    推荐阅读
    • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
    • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
    • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
    • 探讨在循环中调用$.post()时,回调函数为何会在循环结束后才开始执行,并提供解决方案和优化建议。 ... [详细]
    • 本文详细解析了如何使用Python的urllib模块发起POST请求,并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]
    • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
    • 探讨了如何解决Ajax请求响应时间过长的问题。本文分析了一个从服务器获取少量数据的Ajax请求,尽管服务器已经对JSON响应进行了缓存,但实际响应时间仍然不稳定。 ... [详细]
    • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
    • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
    • 当unique验证运到图片上传时
      2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
    • 一个登陆界面
      预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
    • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
    • 在Web开发过程中,Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行,本文将详细解析async属性的作用及使用方法。 ... [详细]
    • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
    • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
    author-avatar
    是不是有谁代替我陪在你身旁
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有