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

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

分析:

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

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

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

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

在JS中这样写:

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

注意:在接口参数中有一个路径有返回参数,因而需要把判断写在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. 《Python核心编程》部分错误纠正(勘误表)(持续更新)

    Chapter 3: 例3-1 makeTextFile.py #!/usr/bin/env python 'makeTextFile.py' import os ls = os.linesep #g ...

  2. PAT 1020. 月饼 (25)

    月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...

  3. 自定义JS常用方法

    1,获取表格中的元素,支持IE,chrome,firefox //获取表单元素的某一个值 function getTableColumnValue(tableId, rowNumber, column ...

  4. 硬盘安装win2003

    1.将安装文件放到D盘或E盘,自己指定 2.用U盘或者光盘启动,进入DOS或WINPE吧,转到刚才指定的目录下,运行 winnt32 /syspart:c/marklocalsource/tempdr ...

  5. Ruby中 使用Builder Xml Markup 操作XML

    =begin Ruby中 使用Xml Markup 轻松的对XML文档操作, 项目地址:http://builder.rubyforge.org/ 使用之前我们需要安装Builder xml mark ...

  6. TinyFrame升级之三:逻辑访问部分

    在上一篇,我们打造了自己的数据访问部分,这篇,我们准备讲解如何打造逻辑访问部分. 在上一篇中,我们利用Repository模式构建了基于泛型的操作合集.由于这些操作的合集都是原子性的操作,也就是针对单 ...

  7. Java中primitive type的线程安全性

    Java中primite type,如char,integer,bool之类的,它们的读写操作都是atomic的,但是有几个例外: long和double类型不是atomic的,因为long和doub ...

  8. C语言复习(1)

    test.c #include <stdio.h> int main(){ printf("hello\n"); return 0; } 1.预处理阶段 由于在test ...

  9. jQuery 之 Callback 实现

    在 js 开发中,由于没有多线程,经常会遇到回调这个概念,比如说,在 ready 函数中注册回调函数,注册元素的事件处理等等.在比较复杂的场景下,当一个事件发生的时候,可能需要同时执行多个回调方法,可 ...

  10. infer.net 入门2 用一个侦探故事来讲解,通俗易懂

    The results look OK, but how do you know that you aren’t missing something. Would a more sophisticat ...