同 一个页面，不同请求路径，如何根据实际场景写JS

Posted 2020-06-14

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

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中

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