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. hdu 2089 不要62（入门数位dp）

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  2. LR多分类推广 - Softmax回归*

    LR是一个传统的二分类模型,它也可以用于多分类任务,其基本思想是:将多分类任务拆分成若干个二分类任务,然后对每个二分类任务训练一个模型,最后将多个模型的结果进行集成以获得最终的分类结果.一般来说,可以 ...

  3. Linux 进程后台运行的几种方式（screen）

    Ctrl+z/bg/nohup/setsid/& 在Linux中,如果要让进程在后台运行,一般情况下,我们在命令后面加上&即可,实际上,这样是将命令放入到一个作业队列中了: ./rsy ...

  4. escape、unescape、encodeURIComponent、decodeURLComponent

    项目中遇到的问题,当我设置一个标签的属性,这个属性值含有js内容,这样就会被执行产生安全问题 解决办法:,可以将后端给的内容先encodeURIComponent,获取的时候再decodeURICom ...

  5. 单元测试 Qunit

    http://api.qunitjs.com/category/assert/    测试方法   选中 "Check for Globals" 会暴露全局对象,看你的代码会不会无 ...

  6. jQuery选择器(可见性选择器)第五节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. 一起写框架-Ioc内核容器的实现-基础功能-ComponentScan支持多包扫描（六）

    实现功能 1.我们看到@ComponentScan注解一个开始定义就是需要支持,扫描多个包,将多个包的类名获取到.现在就实现这个功能. 实现思路 根据传入的字符串数组,获得多个包下的类全限制名. 实现 ...

  8. C#连接六类数据库的代码集

    本文列出了C#连接Access.SQL Server.Oracle.MySQL.DB2和SyBase六种不同数据库的程序源码和需要注意的点. 1.C#连接Access 程序代码: ;

  9. 【转】MYSQL 使用SQLyog导入遇到问题解决

    原文地址:http://blog.163.com/o5655@126/blog/static/1667428342010910112510738/  昨天公司想要将一个数据库的数据导出再导入到另外一个 ...

  10. Android Oreo 8.0 新特性实战 Autosizing TextView --自动缩放TextView

    Android Oreo 8.0 新特性实战 Autosizing TextView --自动缩放TextView 8.0出来很久了,这个新特性已经用了很久了,但是一直没有亲自去试试.这几天新的需求来 ...