功能簡(jiǎn)述：在struts2的一個(gè)小項(xiàng)目中，想要在用戶列表的頁面上在表格中加入超鏈接照片，即顯示一個(gè)用戶的照片信息，這里用到了layer前端組件。

這個(gè)前端組件的官方網(wǎng)站：http://layer./  可以對(duì)照API中的 ajax和layer.photos({}) 方法來使用該模塊。

但是layer組件有兩種版本，舊版本layer 1.8.5和新版本3.0，這兩個(gè)在使用過程中還有不一樣的地方和需要注意的幾點(diǎn)。

1.在jsp上面引入的不同：

新版本：（對(duì)應(yīng)著jQuery3.1）

舊版本：（對(duì)應(yīng)著jQuery1.1）

這里需要注意，低版本的jQuery對(duì)應(yīng)著低版本的layer.js ，高版本對(duì)應(yīng)高版本的，否則會(huì)出現(xiàn)一些關(guān)于jQuery的問題

2.ajax和layer.photos 方法使用的不同

可以根據(jù)layer 的官方API 去看兩個(gè)版本的很多方法不同的使用，這里不僅僅可以看到新的3.0.1版本，也可以選擇更舊版本1.8.5

舊版本：可以明確看到layer.photos是一個(gè)拓展方法，這里要引入一個(gè)拓展類

新版本：官方API中沒有讓你引入拓展類，直接在引入整個(gè)js文件后，這個(gè)layer.photos方法直接可以實(shí)現(xiàn)：（這里下載的3.0版本中也沒有extend這個(gè)文件夾）

3.返回json的形式有變化：可以看到新版本的json形式更加簡(jiǎn)潔一些，但是還是要細(xì)心一點(diǎn)才能在后端將圖片信息解析成Json時(shí)候不報(bào)錯(cuò)

舊版本：

新版本：

4.檢測(cè)自己的json格式是否正確：可以在測(cè)試功能的時(shí)候?qū)son信息打印在控制臺(tái)上，然后復(fù)制在 http:/// 中，可以在線檢測(cè)你的json格式是否正確。

這里舉一個(gè)新版本的layer 返回json格式的檢測(cè)，結(jié)果為valid json,即合法的json。

在src 設(shè)置的值一定要是原圖路徑，且json中的斜杠都是向右斜的：形式如："/Struts2Pro/images/IMG_0996.JPG"（這個(gè)取決于往服務(wù)器上傳照片的URL是怎么設(shè)置的）

5.json的解析代碼：我是在一個(gè)service層創(chuàng)建一個(gè)類，寫了一個(gè)靜態(tài)方法，在這個(gè)方法中將json設(shè)置為StringBuilder對(duì)象進(jìn)行拼接json信息，然后在Action中的方法也是用到這個(gè)方法將得到的照片信息解析成json傳回前端進(jìn)行顯示：

package Service;

import Java.util.ArrayList;

import javabean.Picture;
//這個(gè)方法是service層對(duì)DAO方法中拿到所以照片的集合加工成前端layer組件顯示照片用的json類型
//json類型其實(shí)是一句句的屬性拼接成的字符串，用到拼接，我們用stringBuilder類 不用String類
public class PictureService {
public static String getJson(ArrayList<Picture> list,String ContextPath)
{
StringBuilder str=new StringBuilder();
//處理相冊(cè)的一些信息
str.append("{");
str.append("\"title\":\"用戶相冊(cè) \",");
str.append("\"id\":123,");
str.append("\"strat\":0,");
str.append("\"data\":[");
//處理照片的信息
for(int i=0;i<list.size();i++)
{
str.append("{");
str.append("\"alt\":\""+list.get(i).getName()+"\",");
str.append("\"pid\":123,");
str.append("\"src\":\""+ContextPath+"/"+list.get(i).getUrl()+"\",");
str.append("\"thumb\":\"\",");
str.append("\"area\":[638,851]");
str.append("}");
//因?yàn)樘幚淼恼掌恢挂粡?，所以要循環(huán)在list中的每個(gè)Piction對(duì)象轉(zhuǎn)變成Json中data的形式
//而且循環(huán)處理的每一張圖片（除最后一張）加工成Json信息后在{。。。}加上逗號(hào)。
if(i<list.size()-1){
str.append(",");
}
}
str.append("]");
str.append("}");
return str.toString();
}
}

6.這里沒有太多講使用這個(gè)流程和一些配置，可以參考：http://blog.csdn.NET/litiammmm/article/details/51027813

有問題還請(qǐng)指出