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

  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中

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

同 一个页面,不同请求路径,如何根据实际场景写JS的更多相关文章

  1. JavaScript解决一个带验证的Form两个Submit事件(一个页面保持不动【AJAX实现】,一个页面提交并跳转)的场景

    <form class="form-horizontal" action="/biz/patent/edit" method="post&quo ...

  2. Spring中统一相同版本的api请求路径的一些思考

    Spring中统一相同版本的api请求路径的一些思考 问题场景 当我们在实际开发中,可能会遇到开发相同同版本的api, 假设相同版本的api请求路径为/v1/functionA,/v1/functio ...

  3. Tomcat下ajax请求路径总结

    ajax的url有两种,一种是绝对路径,另一种是相对路径.   一.绝对路径:包括协议名称.主机地址.端口.web项目名称等的完整请求路径. 例如: $.ajax({     url:"ht ...

  4. 大型运输行业实战_day03_2_使用ajax将请求页面与请求数据分离

    1.引入jquery 1.添加jquery包 2.在要使用jquery的页面中引入jquery 引入jquery后必须检查是否引入正确,这里值得注意的是 springMVC默认情况先会拦截 js文件, ...

  5. Struts2框架action路径问题心得----》页面url请求怎么找action

    Struts2 页面url请求怎么找action Struts2 页面url请求如何找action 1.我们使用最原始的方法去查找action,不同注解. struts.xml文件先配置 <!- ...

  6. js打印页面指定区域,并去掉页眉上的时间和请求路径

    需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...

  7. 【Servlet】—在servlet中常混的请求路径

    在页面请求,后台获取相关请求路径是,自己长搞混的几个路径,再次做次标记,不要每次使用想不起来是,都去写一个小的demo来测试. request.getContextPath(); request.ge ...

  8. Struts2的validator和WEB-INF下页面交互以及路径问题

    当我使用短路校验器时(客户端),在页面下方老是出来 FreeMarker template error!然后我就把我的页面都放在了WEB-INF中,结果很多路径都不对了,因为客户端是没有直接访问Str ...

  9. jsp/html页面中的路径

    Html/Jsp页面中的路径,是供浏览器使用的."/"代表的是服务器根目录,一个服务器会有多个web应用,所以请求资源时需要加应用名才能正确访问. 页面中使用的相对路径,也是由浏览 ...

随机推荐

  1. CF 407B Long Path[观察性质 DP]

    B. Long Path time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  2. VS设置程序集属性(文件的详细信息)

    适用范围 本文方法适用于:C#创建的控制台程序,WinForm,WPF等VS创建的.Net工程信息设置. 方法步骤 1.在 项目 上点击鼠标右键选择 属性 ,进入这个页面,点击 程序集信息(重点关注 ...

  3. IT菜鸟的3(for循环+分支语句)

    第三天学的东西感觉已经不是很容易能想通了,感觉头懵懵的,难道这就是是文科生的障碍吗,我不相信,坚持!相信自己一定会做好! 1:for循环!(1)循环四要素:初始条件,循环条件,循环体,状态改变for( ...

  4. OC中的指针

    NSError *err = nil; NSError __strong **error = &err; //因为在oc中,通过* *err 创建的指针是用__strong修改的,所以要一致, ...

  5. oracle存储过程中的if...elseif...else用法

    if ... then ...   elsif ... then ... else ...   end if; or     if ... then      ...   else ...   end ...

  6. 在表单中元素的onchange事件的兼容性问题

    onchange:在值发生改变的时候触发 text:当光标离开的时候如果内容有变化就触发 radio/check:标准浏览器下点击的时候只要值变了就触发 非标准浏览器下焦点离开的时候如果值变了就触发

  7. mysql连接数设置操作(Too many connections)

    mysql在使用过程中,发现连接数超了~~~~ [root@linux-node1 ~]# mysql -u glance -h 192.168.1.17 -pEnter password: ERRO ...

  8. (原创)mybatis学习二,spring和mybatis的融合

    mybatis学习一夯实基础 上文介绍了mybatis的相关知识,这一节主要来介绍mybaits和spring的融合 一,环境搭建 1,jar包下载,下载路径为jar包 2,将包导入到java工程中 ...

  9. Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.

    Validation failed for one or more entities. See 'EntityValidationErrors' property for more details. ...

  10. BZOJ 3295: [Cqoi2011]动态逆序对

    3295: [Cqoi2011]动态逆序对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3865  Solved: 1298[Submit][Sta ...