Liferay 6.1开发学习(十):在Liferay中使用Ajax
在现在的Web开发中,Ajax的使用非常频繁,合理的使用Ajax也是提高用户体验的一个重要手段,在Liferay中使用Ajax其实非常方便,但是和普通的web程序稍有差异。
一、简单示例
客户端代码编写
1、在Liferay中创建一个简单的Portlet页面,可以取名为ajaxPortlet,具体的创建过程可以参考;http://www.huqiwen.com/2012/09/03/liferay-6-1-development-study-3-portlet-explicate/
2、在liferay中ajax的请求地址要使用portlet:resourceURL,a这样定义:<portlet:resourceURL var="ajaxUrl"/>,而不是普通请求的portlet:actionURL。
3、编辑view.jsp页面,在页面中添加<portlet:resourceURL var="ajaxUrl"/>,引入Jquery的包(使用jquery做ajax请求),然后编写一个简单的ajax请求代码。
function ajaxTest(){ $.post('<%=ajaxUrl%>',{p_p_resource_id:'test1'},function(data){ $('#message').html(data); }) }
这个代码的意思就是请求一下服务端,然后将得到的结果显示到id为message的html元素中。
4、这样客户端的代码就是编写完成。具体的详细代码参看下面中的附件。
服务端代码编写
1、在portlet的控制类中重写serveResource方法。
2、在此方法中添加相应的处理类,此处的处理方法和普通的servlet一样,可以使用下面的代码。
@Override public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse) throws IOException, PortletException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = null; try { out = response.getWriter(); } catch (IOException e) { e.printStackTrace(); } String result = "这是服务端返回的结果信息:"; out.println(result); out.flush(); out.close(); super.serveResource(resourceRequest, resourceResponse); }
可以看到其实和普通的servlet处理基本上是一模一样。
二、多ajax请求
上面的示例虽然简单,但仔细一想就会发现有一个问题,如果在一个页面中有多个ajax请求怎么办?我们要依靠一个resourceID来区分不同的请求,同样也是分客户端和服务端。
客户端
方法1:在resourceURL里面添加一个属性id,如<portlet:resourceURL var="ajaxUrl2" id="test2"/>
方法2:在rsourceURL里面添加一个参数,如:
<portlet:resourceURL var="ajaxUrl1"> <portlet:param name="p_p_resource_id" value="test1"/> </portlet:resourceURL>
方法3:在ajax请求时添加相应的参数,如:
function ajaxTest(){ $.post('<%=ajaxUrl1%>',{p_p_resource_id:'test1'},function(data){ $('#message').html(data); }) }
方法4:直接在URL里面拼接
服务端
服务端的处理只有一个,取得此resourceID,方法为String resourceID = resourceRequest.getResourceID();然后根据不同的resourceID判断处理不同的ajax请求。返回和一般的处理一样。
其他
在处理返回结果时,如果不想使用普通的servlet的处理方式,可以使用liferay的ServletResponseUtil.sendFile()方法,此方法主要是用来处理文件的,但用于处理ajax的请求也非常方便。
demo代码下载:点击此处下载
这个demo里面 jquery-1.8.2.min.js 里面怎么显示不规范啊 只有一行
汗,这个不是不规范,这个是压缩版的jquery……
报错 怎么办
为什么源码直接复制了, 结果还是出不来。
没有报错,可能是url地址不对。 楼主求解。 😈 😈
可能是URL地址不正确,使用浏览器的开发者工具监控一下看
这里的地址我有点看不懂,我把ajax发过去的地址复制下来:
http://localhost:8080/zh/web/bruno/profile?p_p_id=AjaxPortlet_WAR_AjaxPortletportlet_INSTANCE_iQ5u&p_p_lifecycle=2&p_p_state=normal&p_p_mode=view&p_p_cacheability=cacheLevelPage&p_p_col_id=column-1&p_p_col_count=4
这里post传的参数是p_p_resource_id=test1
请问这个还有什么问题吗?
楼主,怎么说?
只是基于这个看不出来什么,源码是一个portlet工程,能正常运行不?
恩,正常运行,但是效果出不来。 不报错,没效果。
Demo下载不下来啊
你好,我想请教var=”ajaxUrl”这个URL地址是怎么得来的?谢谢。
上面有定义的
明白了,提交给当前Portlet 😀
亲爱的楼主,只有一个ajax的情况,我原样输入你的代码,不行诶,运行不出效果,感觉是jsp页面不能提交到portlet,求答案,谢谢,再一个,<portlet:resourceURL 和 <portlet:actionURL 有什么区别啊?不胜感激
代码肯定是可以的,resourceURL简单的说是会进入到serverResource方法,actionURL进入指定的方法或者processaction
谢谢楼主 🙂
HttpServletRequest httpServletRequest= PortalUtil.getOriginalServletRequest(request); 获取ajax 其他的参数
貌似这样的可以直接后台getResourceId()
请问如果是在spring mvc portlet中又如何使用ajax呢
我在默认的view页面使用<portlet:resourceURL标签没问题,在view页面点添加按钮,地址跳转之后,再使用<portlet:resourceURL,生成的地址是空的
如何获取p_p_resource_id?在serveResource中通过resourceRequest.getParameter(“p_p_resource_id”)获取不到
好麻烦,直接request.getResourceId()就行了
胡帅,我们最近在项目运用中发现一个问题,不知道如何解决.
貌似目前ajax代码只能写在当前的view.jsp中.
当我们把js代码放在单独的.js文件中,在当前jsp中作为引用时.放在 .js文件中的 ajax出问题了.找不到路径.
我们想求证的是,portlet中使用 ajax时,只能把ajax的代码写在当前的 jsp文件中,无法放在 .js文件中吗?或者可以放在.js文件中,需要其他配置吗?
劳累胡帅了.
可以放到单独的JS中,但是请求的URL地址,需要在JSP中作为参数传到相应的JS方法里面。
能举个例子吗,也有同样的疑问
比如我们定义了一个AJAX的链接: ,现在我们在JS文件中有一个方法叫doAjax,我们在JSP页面中写doAjax(‘${ajaxUrl}’),在这个js的方法里面调用这个请求,然后进行相应的处理。
加入从ajax传了参数,怎么从portlet中取到参数的值
method:’GET’,
data:{x:’x’},
on:{
success:function(data){
怎么取data的值?
参数为什么只能在前面加上p_p_,后台才可以获取到参数呢??很费解,不是都加portlet:namespace吗。这里加portlet:namespace获取不到呢?