ajax请求后台,返回json格式数据,模板!

简介: 添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术。将返回的json格式数据,添加到select标签下。           //加载出部门的信息            function loadGroup(){                            $.

添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术。将返回的json格式数据,添加到select标签下。

 

<script type="text/javascript">
        //加载出部门的信息    
        function loadGroup(){
            
                $.ajax({
                    type:"post",
                    url:"<%=request.getContextPath() %>/master/sysUser_findGroup.action",
                    async:false,
                    dataType:"json",
                    success:function(msg){
                        var group=msg["rows"];
                        if(group.length>0){
                              //获取select标签对象
                              var selectObj=document.getElementById("sysGroup");
                                      //将返回的部门信息的json数据对象便利,添加到select标签下
                                      for(var i=0;i<group.length;i++){
                                          selectObj.add(new Option(group[i].sysGroupName,group[i].sysGroupId));
                                      }
                                  }
                       }
                });
            }    
        
        
        //如果部门信息变动,加载相应部门下的角色信息
        function loadRole(){
            //获取部门id
            var sysGroupId=document.getElementById("sysGroup").value;
            //当部门信息有变化,则将原先的部门的角色清空
            var sysRole=document.getElementById("sysRole");
            sysRole.length=1;
            //当部门信息不是‘请选择’才发送ajax请求
            if(sysGroupId!="0"){
                $.ajax({
                    type:"post",
                    url:"<%=request.getContextPath() %>/master/sysUser_queryRole.action",
                    data:"sysGroupId="+sysGroupId,
                    async:false,
                    dataType:"json",
                    success:function(msg){
                        var role=msg["rows"];
                        if(role.length>0){
                              //获取select标签对象
                              var selectObj=document.getElementById("sysRole");
                                      //将返回的部门信息的json数据对象便利,添加到select标签下
                                      for(var i=0;i<role.length;i++){
                                          selectObj.add(new Option(role[i].sysRoleName,role[i].sysRoleId));
                                      }
                                  }
                       }
                });
            }
            loadSelectStyle();
        }
        //页面加载完成时,加载此方法,发送ajax请求找到部门信息
        $(document).ready(function(){
            loadGroup();
       
        });
        </script>

相关文章
|
1月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
|
1月前
|
JSON 缓存 前端开发
PHP如何高效地处理JSON数据:从编码到解码
在现代Web开发中,JSON已成为数据交换的标准格式。本文探讨了PHP如何高效处理JSON数据,包括编码和解码的过程。通过简化数据结构、使用优化选项、缓存机制及合理设置解码参数等方法,可以显著提升JSON处理的性能,确保系统快速稳定运行。
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
70 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
88 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
159 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
50 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0
|
4月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。