zoukankan      html  css  js  c++  java
  • 同 一个页面,不同请求路径,如何根据实际场景写JS

    场景:使用同一个“添加群成员”的页面来操作

    1. 建群页面:建群成功后,返回查看群成员页面。在建群过程中直接添加群成员并返回一个群名称的参数。
    2. 添加群成员页面:在巳有群内添加群成员,添加成功后,返回查看群成员页面。

    分析:

    使用同一个页面,调两种不同接口,从接口中可以看到,一个包含{groupId},另一个没有

    建群的接口为:/chat/vindicate/group

    添加群成员的接口为:/chat/vindicate/group/{groupId}

    1. 在eclipse中需要做两个页面的渲染工作,其中使用相同的“添加群成员”页面,需要做到变量一样,接口路径不一样,需要在JS中根据{groupId}是否为空,做判断
    2. 在eclipse中,没有{groupId}的,要设{groupId}为空
    3. 以下显示在eclipse中两个页面的渲染情况
    //添加群成员
        @GET
        @Path("/add/member/{id}")
        public Viewable getmember(@PathParam("id") String id) {        
            Map<String, Object> o = buildMap();
            
                o.put("groupId", id);  //有ID的情况
                //查询可添加群成员
                o.put("url_search_group_member", buildResourceUrl("/chat/vindicate/group"));
                //添加群成员
                o.put("url_add_group_member", buildResourceUrl("/chat/vindicate/group/"+id));  //使用相同页面,变量名称要一样,路径不一样,这个路径有ID
                //返回查看群成员页面
                o.put("url_member_list", buildControllerUrl("/group/list/"+id));  //添加群成员页面在返回查看群成员页面时不带参数
            
            return new Viewable("/group_add_member_list.ftl", o);
        }
        
        //新建群页面
            @GET
            @Path("/add/list")
            public Viewable getAddGroup() {        
                Map<String, Object> o = buildMap();
    o.put(
    "groupId", "");//没有ID的情况,要设空值 //添加群成员 o.put("url_add_group_member", buildResourceUrl("/chat/vindicate/group"));//使用相同的页面,变量一样,路径不一样,这个没有ID //查询可添加群成员 o.put("url_search_group_member", buildResourceUrl("/chat/vindicate/group")); //返回查看群成员页面 o.put("url_member_list", buildControllerUrl("/group/list/"));//新建群在返回查看群成员页面时,要带一个群名称的参数,并且“添加群成员”的路径中含有ID,在写JS中同样的要拼一个ID上去,两个页面要保持一致 return new Viewable("/group_add_member_list.ftl", o); }

    在JS中这样写:

    $.ajax({
                    type: "post",
                    url: "${url_add_group_member}",  //使用相同的变量,目的是只需要调用一次就可以了
                    data: ids,
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function(data) {       //在调用成功下写判断,
                        if(data.status == '200'){
                            if('${groupId}' == ''){     //返回相同页面,区别建群需要带参数返回,而添加群成员不需要带参数返回,这里需要再做个判断,{groupId}为空时,
                                location.href = "${url_member_list}" + data.chatGroupId;    //跳转页面要加一个ID,参照eclipse中的写法
                                sessionStorage.setItem(data.chatGroupId,data.chatGroupName);   //跳转的同时带一个“群名称”的参数,所以要本地保存这样一个参数
                            }else{
                                location.href = "${url_member_list}";   //{groupId}不为空时,执行相同的跳转页面,eclipse中巳经添加ID,所以在这里无需再次添加ID
                            }
                        }
                    },
                    error: function(data) {
                        alert('新增失败,服务器出错');
                    }
                });

    注意:在接口参数中有一个路径有返回参数,因而需要把判断写在success中;如果没有返回参数,可以把判断写在error中

    到此,同一个页面,不同请求路径的实时场景功能完毕。

  • 相关阅读:
    网格形变
    网格简化
    无法打开包括文件: “QWidget”: No such file or directory
    遇到一个 bug svg 抖动的解决方案
    echarts-gl 遇到一个错误 groupGL 未定义
    鼠标操控三维视角
    鼠标控制3维操作 不知道能不能获得一些灵感
    tensorflow 安装
    Codeforces Round #541 (Div. 2) B.Draw!
    Codeforces Round #541 (Div. 2) A.Sea Battle
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/5203073.html
Copyright © 2011-2022 走看看