同 一个页面,不同请求路径,如何根据实际场景写JS
场景:使用同一个“添加群成员”的页面来操作
- 建群页面:建群成功后,返回查看群成员页面。在建群过程中直接添加群成员并返回一个群名称的参数。
- 添加群成员页面:在巳有群内添加群成员,添加成功后,返回查看群成员页面。
分析:
使用同一个页面,调两种不同接口,从接口中可以看到,一个包含{groupId},另一个没有
建群的接口为:/chat/vindicate/group
添加群成员的接口为:/chat/vindicate/group/{groupId}
- 在eclipse中需要做两个页面的渲染工作,其中使用相同的“添加群成员”页面,需要做到变量一样,接口路径不一样,需要在JS中根据{groupId}是否为空,做判断
- 在eclipse中,没有{groupId}的,要设{groupId}为空
- 以下显示在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的更多相关文章
- JavaScript解决一个带验证的Form两个Submit事件(一个页面保持不动【AJAX实现】,一个页面提交并跳转)的场景
<form class="form-horizontal" action="/biz/patent/edit" method="post&quo ...
- Spring中统一相同版本的api请求路径的一些思考
Spring中统一相同版本的api请求路径的一些思考 问题场景 当我们在实际开发中,可能会遇到开发相同同版本的api, 假设相同版本的api请求路径为/v1/functionA,/v1/functio ...
- Tomcat下ajax请求路径总结
ajax的url有两种,一种是绝对路径,另一种是相对路径. 一.绝对路径:包括协议名称.主机地址.端口.web项目名称等的完整请求路径. 例如: $.ajax({ url:"ht ...
- 大型运输行业实战_day03_2_使用ajax将请求页面与请求数据分离
1.引入jquery 1.添加jquery包 2.在要使用jquery的页面中引入jquery 引入jquery后必须检查是否引入正确,这里值得注意的是 springMVC默认情况先会拦截 js文件, ...
- Struts2框架action路径问题心得----》页面url请求怎么找action
Struts2 页面url请求怎么找action Struts2 页面url请求如何找action 1.我们使用最原始的方法去查找action,不同注解. struts.xml文件先配置 <!- ...
- js打印页面指定区域,并去掉页眉上的时间和请求路径
需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} < ...
- 【Servlet】—在servlet中常混的请求路径
在页面请求,后台获取相关请求路径是,自己长搞混的几个路径,再次做次标记,不要每次使用想不起来是,都去写一个小的demo来测试. request.getContextPath(); request.ge ...
- Struts2的validator和WEB-INF下页面交互以及路径问题
当我使用短路校验器时(客户端),在页面下方老是出来 FreeMarker template error!然后我就把我的页面都放在了WEB-INF中,结果很多路径都不对了,因为客户端是没有直接访问Str ...
- jsp/html页面中的路径
Html/Jsp页面中的路径,是供浏览器使用的."/"代表的是服务器根目录,一个服务器会有多个web应用,所以请求资源时需要加应用名才能正确访问. 页面中使用的相对路径,也是由浏览 ...
随机推荐
- 「Mobile Testing Summit China 2016」 中国移动互联网测试大会-议题征集
时至北京盛夏,一场由 TesterHome 主办的关于移动互联网测试技术的盛会正在紧锣密鼓的筹备中.只要你关注软件质量,热爱测试,期待学习,都欢迎你加入这次移动测试技术大会中和我们一起分享经验.探讨话 ...
- hdu-5933----hdu-5943
hdu-5933 思路: 贪心,首先要求总和是k的倍数,而又要求相邻,说明相邻的一块如果是sum/k的倍数,那么就地切割这样才能使操作数目最少; hdu-5934 思路: 强连通分量,可以找出强连通分 ...
- 第9章 用内核对象进行线程同步(3)_信号量(semaphore)、互斥对象(mutex)
9.5 信号量内核对象(Semaphore) (1)信号量的组成 ①计数器:该内核对象被使用的次数 ②最大资源数量:标识信号量可以控制的最大资源数量(带符号的32位) ③当前资源数量:标识当前可用资源 ...
- ubuntu14安装Qt
首先下载Qt源码 https://download.qt.io/archive/qt/4.8/4.8.4/ 这里我下载的是qt-everywhere-opensource-src-4.8.4.tar. ...
- centos7 安装拼音输入法(转载)
http://m.blog.csdn.net/article/details?id=52137523
- three.js 之旅 (三)
复制自:http://www.cnblogs.com/ssrsblogs/p/5611332.html 创建模型: 1.长方体: THREE.CubeGeometry(width, height, d ...
- HTML <map> 设置图热点
需要在一张图片中,设置一个区域为热点就用到了<map> 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. <img src="planet ...
- 添加Distributor失败
上周做了一个case,客户无法为SQL Server instance配置remote distributor. 下面分享一下排查问题的过程,希望对您排查类似的问题所有帮助. 客户的环境中的SQL S ...
- Prism中使用MEF的例子
一个基本的例子,没有viewmodel,没有使用Behaviors 大体步骤: 1.创建应用程序 2.使用"Shell"替换"MainWindow"(silve ...
- vmware安装cent os 6.5 + oracle 11g xe + jboss eap 6.2 + weblogic 12c+ webshpere mq 7.5
前言: mac系统发展速度确实很快,短短数年,mac os上已经能网银支付(中行.招行.工商.支付宝等均已全面支持mac os了),windows上的经典常用软件:qq.飞信.旺旺.有道词典.有道云笔 ...