1、首先liferay要发送ajax请求，那么就需要在jsp中定义resourceURL

<portlet:resourceURL var="workDeal" id="workDeal" />

2、然后我们如何使用alloy-ui读取数据？

这里我们可以借助alloy-ui提供的一个IO功能，发送ajax请求并从结果中读取数据

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">

    <script src="../../build/aui/aui.js"></script>

</head>

<body>

    <h1>AlloyUI - I/O demo</h1>

    <script>

    YUI({ filter:'raw' }).use('aui-io', function(Y) {

        Y.io.request('data/content.html', {

            on: {

                success: function() {

                    var data = this.get('responseData');

                    alert(data);

                }

            }

        });

    });

    </script>

</body>

</html>

这个案例中，是从一个文件中读取内容，然后alert输出

3、那么如果通过ajax请求获取数据，而不是读取文件呢？

function callWorkDeal(workDealUrl){

    var data = '';

    YUI({filter:'raw'}).use('aui-tabview', function(Y){

        Y.io.request(workDealUrl, {

            method:'get',

            on:{

                success:function(){

                    //处理数据

                    var recevieData = this.get('responseData');

                }

            }

        });

    });

}

可以通过这个函数来触发这个ajax操作，从而从后天获取对应的数据

4、如何展示tab页？

new Y.TabView({

            children: [

                {

                    label: 'foo',

                    content: '<p>foo content</p>'

                },

                {

                    label: 'bar',

                    content: '<p>bar content</p>'

                },

                {

                    label: 'fooz',

                    content: '<p>fooz content</p>'

                }

           ],

           srcNode: '#pills',

           type: 'pills'

        }).render();

效果类似：

5、通过ajax请求获取数据，展示在tab页中，这里使用的是liferay

<portlet:resourceURL var="workDeal" id="workDeal" />

<br/>

<div id="workDeal">

    <ul class="nav nav-tabs">

        <li class="active"><a href="#myWorkDeal">我的待办</a></li>

        <li><a href="#region">市待办</a></li>

        <li><a href="#province">省待办</a></li>

    </ul>

    <div class="tab-content">

        <div id=myWorkDeal>

        </div>

        <div id="region" class="tab-pane">

        </div>

        <div id="province" class="tab-pane">

        </div>

    </div>

</div>

<br/>

js部分

<script>

	YUI({filter:'raw'}).use('aui-tabview', function(Y){

		new Y.TabView({

		    srcNode: '#workDeal'

		}).render();

	});

	function <portlet:namespace/>showDaiban() {

		$.ajax({

			type:'POST',

			url:'<%=workDeal%>',

			data:'',

			dataType:'json',

			timeout:5000,

			cache:false,

			async:false,

			success:function(dealdata){

				//$('#ssoUrl').attr('href', dataurl);

				//data = dealdata;

				$.each(dealdata, function(n, value){

					//加上链接

	                var dealurl = eval("(" + value.content + ")");

					var content="";

	                $.each(dealurl, function(n, value){

	                	content += "<a href=\"" + value.url + "\">" + value.text + "</a><br/>";

					});

	                //拼接上

	                $('#' + value.label).html(content);

				});

				//去除最后一个，号

				if(lenjson > 0)

					tbody=tbody.substring(0,tbody.length-1);

				tbody += "]";

			},

			error:function(request){

				alert("connection error " + request);

			}

		});

	}

</script>

后台获取数据传到前台

package cn.ffcs.demo.portlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.io.Serializable;

import java.util.ArrayList;

import java.util.Date;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.portlet.ActionRequest;

import javax.portlet.ActionResponse;

import javax.portlet.PortletException;

import javax.portlet.RenderRequest;

import javax.portlet.RenderResponse;

import javax.portlet.ResourceRequest;

import javax.portlet.ResourceResponse;

import javax.servlet.http.Cookie;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import cn.ffcs.demo.model.Books;

import cn.ffcs.demo.model.impl.BooksImpl;

import cn.ffcs.demo.service.BooksLocalService;

import cn.ffcs.demo.service.BooksLocalServiceUtil;

import cn.ffcs.hbup.action.workdeal.service.WorkDealService;

import cn.ffcs.hbup.action.workdeal.vo.WorkDealVo;

import com.liferay.counter.service.CounterLocalServiceUtil;

import com.liferay.portal.kernel.dao.orm.DynamicQuery;

import com.liferay.portal.kernel.dao.orm.DynamicQueryFactoryUtil;

import com.liferay.portal.kernel.dao.orm.ProjectionFactoryUtil;

import com.liferay.portal.kernel.dao.orm.ProjectionList;

import com.liferay.portal.kernel.dao.orm.PropertyFactoryUtil;

import com.liferay.portal.kernel.exception.PortalException;

import com.liferay.portal.kernel.exception.SystemException;

import com.liferay.portal.kernel.json.JSONArray;

import com.liferay.portal.kernel.json.JSONException;

import com.liferay.portal.kernel.json.JSONFactoryUtil;

import com.liferay.portal.kernel.json.JSONObject;

import com.liferay.portal.kernel.json.JSONTransformer;

import com.liferay.portal.kernel.util.ParamUtil;

import com.liferay.portal.kernel.util.PropertiesParamUtil;

import com.liferay.portal.kernel.util.Validator;

import com.liferay.portal.model.BaseModel;

import com.liferay.portal.model.CacheModel;

import com.liferay.portal.model.User;

import com.liferay.portal.service.ServiceContext;

import com.liferay.portal.util.PortalUtil;

import com.liferay.portlet.expando.model.ExpandoBridge;

import com.liferay.util.bridges.mvc.MVCPortlet;

/**

 * Portlet implementation class BookPortlet

 */

public class BookPortlet extends MVCPortlet {

	@Override

	public void serveResource(ResourceRequest resourceRequest,

			ResourceResponse resourceResponse) throws IOException,

			PortletException {

		String resourceId = resourceRequest.getResourceID();

		//这连个是resourceRequest和resourceResponse 是原生的一个包装，加了一些liferay的信息

		HttpServletRequest request = PortalUtil

				.getHttpServletRequest(resourceRequest);

		HttpServletResponse response = PortalUtil

				.getHttpServletResponse(resourceResponse);

		PrintWriter out = null;

		try {

			out = resourceResponse.getWriter();

		} catch (IOException e) {

			e.printStackTrace();

		}

		if(resourceId.equals("ssoUrl")) {

			List urls = new ArrayList<String>();

			String url1 = "http://cfmf-p6.mss.ctc.com/portal/sso/ssoAuthenticate!mssSsoLogin.action";

			String url2 = "http://10.128.114.6:80/adaptercas/login.do?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_WD%26provinceCode%3D06";

			String url3 = "http://uip.hq.ctc.com/uip/open/loginAloneNewAuth.htm?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_UIP%26provinceCode%3D06&redirectUrl=http%3A%2F%2Fuip.hq.ctc.com%2Fuip%2F%40jt%2Findex.htm";

			String url4 = "http://websites.hq.ctc.com/et/open/loginAloneNewAuth.htm?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_BMMH%26provinceCode%3D06&redirectUrl=http%3A%2F%2Fwebsites.hq.ctc.com%2Fet%2F%40qzlx%2Findex.htm";

			String url5 = "http://websites.hq.ctc.com/et/open/loginAloneNewAuth.htm?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_BMMH%26provinceCode%3D06&redirectUrl=http%3A%2F%2Fwebsites.hq.ctc.com%2Fet%2F%40shgg%2Findex.htm";

			String url6 = "http://websites.hq.ctc.com/et/open/loginAloneNewAuth.htm?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_BMMH%26provinceCode%3D06&redirectUrl=http%3A%2F%2Fwebsites.hq.ctc.com%2Fet%2F%40hx%2Findex.htm";

			String url7 = "http://websites.hq.ctc.com/et/open/loginAloneNewAuth.htm?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_BMMH%26provinceCode%3D06&redirectUrl=http%3A%2F%2Fwebsites.hq.ctc.com%2Fet%2F%40lte%2Findex.htm";

			String url8 = "http://eiac.hubeitel.com/uap/sso2.do?appCode=UAP_DXXW&provinceCode=06";

			String url9 = "http://10.140.19.144:87/linedfree/ChainNewAuth.jsp?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_GM%26provinceCode%3D06";

			String url10 = "http://10.140.19.164:8080/address/open/loginAloneNew.htm?ssoUrl=http%3A%2F%2Feiac.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DUAP_ADDRESS%26provinceCode%3D06";

			String url11 = "http://www.chntel.com";

			String url12 = "http://www.ctebuy.com";

			String url13 = "http://132.129.4.111/staff/serverpages/front/login.jsp";

			String url14 = "http://hbmis0.hubeitel.com/dx_common.nsf/intf_redirectto_GroupEmail?openform";

			String url15 = "http://hr-hq.mss.ctc.com/service/ssoRegServlet";

			String url16 = "http://hrzp-hq.mss.ctc.com/portal/auth";

			String url17 = "http://sjfz-hq.mss.ctc.com/audit/sso/login.do";

			String url18 = "http://mssportal.mss.ctc.com/ZgdxLogin?ssoUrl=http%3A%2F%2Ftyrz-hq.hubeitel.com%2Fuap%2Fsso2.do%3FappCode%3DmssPortal%26provinceCode%3D06&progID=http%3a%2f%2flaw-hq.mss.ctc.com%2flwmis%2fsecurity%2flogin%3fauthType%3dnfsapsso";

			urls.add(url1);urls.add(url2);urls.add(url3);urls.add(url4);urls.add(url5);

			urls.add(url6);urls.add(url7);urls.add(url8);urls.add(url9);urls.add(url10);

			urls.add(url11);urls.add(url12);urls.add(url13);urls.add(url14);urls.add(url15);

			urls.add(url16);urls.add(url17);urls.add(url18);

			//组装json

			StringBuffer jsonStr = new StringBuffer("[");

			jsonStr.append("\"").append(url1).append("\",");

			jsonStr.append("\"").append(url2).append("\",");

			jsonStr.append("\"").append(url3).append("\",");

			jsonStr.append("\"").append(url4).append("\",");

			jsonStr.append("\"").append(url5).append("\",");

			jsonStr.append("\"").append(url6).append("\",");

			jsonStr.append("\"").append(url7).append("\",");

			jsonStr.append("\"").append(url8).append("\",");

			jsonStr.append("\"").append(url9).append("\",");

			jsonStr.append("\"").append(url10).append("\",");

			jsonStr.append("\"").append(url11).append("\",");

			jsonStr.append("\"").append(url12).append("\",");

			jsonStr.append("\"").append(url13).append("\",");

			jsonStr.append("\"").append(url14).append("\",");

			jsonStr.append("\"").append(url15).append("\",");

			jsonStr.append("\"").append(url16).append("\",");

			jsonStr.deleteCharAt(jsonStr.length() - 1);

			jsonStr.append("]");

			System.out.println(jsonStr.toString());

			out.print(jsonStr.toString());

		} else if(resourceId.equals("workDeal")) {

			try {

				//如果是代办

				WorkDealService wds = new WorkDealService();

				String accessTokenDecrypt = null;

				String oaAccount = "";

				//获取oaAccount

				Map<String, Cookie> cookieMap = readCookieMap(request);

				Cookie token = cookieMap.get("accessTokenDecrypt");

				Cookie ltpaToken = cookieMap.get("LtpaToken");

				if (token != null)

					accessTokenDecrypt = token.getValue();

				if (accessTokenDecrypt != null) {

					// 创建对应的json串，获取ssopare

					JSONObject accessTokenJson = JSONFactoryUtil

							.createJSONObject(accessTokenDecrypt);

					// 2、从token中获取对应的oa账号

					String ssoSpare = accessTokenJson.getString("ssoSpare");

					if(ssoSpare != null) {

						oaAccount = ssoSpare;

					}

				}

				List<WorkDealVo> resultWorks = wds.getAllWorks(oaAccount, ltpaToken);

				//输出json串

				StringBuffer outJson = new StringBuffer("[");

				for(WorkDealVo work : resultWorks) {

					outJson.append(work.toJsonString()).append(",");

				}

				//去除最后一个逗号

				//{

				//label: 'fooz',

				// content: '<p>fooz content</p>'

				// }

				if(resultWorks.size() > 0)

					outJson.deleteCharAt(outJson.length() - 1);

				outJson.append("]");

				JSONArray children = JSONFactoryUtil.createJSONArray();

				JSONObject myWorkDeal = JSONFactoryUtil.createJSONObject();

				JSONObject region = JSONFactoryUtil.createJSONObject();

				JSONObject province = JSONFactoryUtil.createJSONObject();

				myWorkDeal.put("label", "myWorkDeal");

				myWorkDeal.put("content", outJson.toString());

				region.put("label", "region");

				region.put("content", outJson.toString());

				province.put("label", "province");

				province.put("content", outJson.toString());

				children.put(myWorkDeal);

				children.put(region);

				children.put(province);

				out.print(children.toString());

			} catch (JSONException e) {

				// TODO Auto-generated catch block

				e.printStackTrace();

			}

		}

		out.flush();

		out.close();

		super.serveResource(resourceRequest, resourceResponse);

	}

	public Map<String, Cookie> readCookieMap(HttpServletRequest request) {

		Map<String, Cookie> cookieMap = new HashMap<String, Cookie>();

		Cookie[] cookies = request.getCookies();

		if (null != cookies) {

			for (Cookie cookie : cookies) {

				System.out.println("获取cookie:" + cookie.getName() + " value:"

						+ cookie.getValue());

				cookieMap.put(cookie.getName(), cookie);

			}

		}

		return cookieMap;

	}

}

效果展示：

 

【liferay】1、使用alloy-UI发送ajax请求的更多相关文章

  1. 在发送ajax请求时加时间戳或者随机数去除js缓存

    在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...

  2. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  3. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  4. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  5. js中使用队列发送ajax请求

    最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...

  6. IE6下a标签上发送ajax请求总是error

    IE6下真是处处是坑啊!!!走过了一个又一个坑,记录一下吧. 之前不知道a标签上注册click事件之后,发送ajax请求总是error.后来经过几番网上搜索,终于找到高人遇到此坑的解决办法.原来是a标 ...

  7. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  8. Axios发送AJAX请求

    目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...

  9. 接入天猫精灵auth2授权页面https发送ajax请求

    已存在一个应用A,采用的是http交互, 在接入天猫精灵时,要求请求类型是https,所以在应用服务前加了个nginx转发https请求.在绑定授权页面,会发送ajax请求验证用户名和密码,采用htt ...

随机推荐

  1. Grunt参考

    Grunt参考: http://www.cnblogs.com/yexiaochai/p/3603389.html http://blog.csdn.net/wangfupeng1988/articl ...

  2. Chartist.js-同时画柱状图和折线图

    最近几天都在研究chartist,因为echarts生成的图是位图,导成PDF的时候不够清晰.而chartist是搜到的免费插件中呼声较高的,基于SVG. 今天主要是想举一些代码例子给大家,介绍下如何 ...

  3. 阿里云ecs遭到频繁的ddos攻击始末

    苦逼熬夜近俩月的时间搞出来个小东东,还指望它能给自己捞点~  结果刚上线没多久就遭到竞争对手疯狂的ddos攻击. 可怜的阿里云默认只能抗住5G的攻击,超出的直接黑洞,也是很无奈,然而能免费抗5G这在国 ...

  4. java删除数组中的第ｎ个数

    package test; import java.util.Scanner; public class Deletearr { public static void deletearr(){ Sca ...

  5. 数据库中float类型字段，转化到前端显示，统一保留两位小数

    客户的一个需求,mybatis查询到的数据库的数据进行转换,采用TypeHandler<T>的方式.float保留两位精度可以采用DecimalFormat 直接贴上最终的解决代码(事情没 ...

  6. 非确定性计算引擎转化为C#版本并重构

    这是之前我写的原始的 VB.NET 版本: http://www.cnblogs.com/RChen/archive/2010/05/17/1737587.html 转化为 C# 版本后,还进行了一些 ...

  7. Nodejs mongodb 管理组件adminmongodb

    强大的 nodejs的mongodb管理工具,强大到即下即用: 安装需求: 1.git命令获取组件包,git clone https://github.com/mrvautin/adminMongo. ...

  8. 设计模式的征途—11.外观（Facade）模式

    在软件开发中,有时候为了完成一项较为复杂的功能,一个类需要和多个其他业务类交互,而这些需要交互的业务类经常会作为一个完整的整体出现,由于涉及的类比较多,导致使用时代码较为复杂,此时,特别需要一个类似服 ...

  9. 发现大量的TIME_WAIT解决办法 -- 修改内核参数

    今天早上一上班,有同事就反映公司好几个网站都打不开,登陆数据库 服务器(windows),发现很卡,于是重启了下服务器,进入系统后,没过一会问题依旧,查看了下系统进程,发现mysql占用率达到99%, ...

  10. JS 三目运算符和RETURN

    以前写的博客,现在搬过来 首先三目运算符和return的正确用法是这样的: (function test(){ var foo = []; return typeof foo === 'object' ...