首先，專案環境是用：

Java後端：Myeclipse10

後端採用框架：ssm，沒有用到mevan管理jar包

實行前後分離開發模式，通過api介面向前端傳遞資料

web前端：HTML5

首先跨域問題，重寫過濾器Filter的doFilter()方法

   @Override

   public void doFilter(ServletRequest request,ServletResponse response,

          FilterChain chain) throws IOException, ServletException {

//    HttpServletResponseres=(HttpServletResponse)response;

//    res.setContentType("text/html;charset=UTF-8");

//    res.setHeader("Access-Control-Allow-Origin","*");

//    res.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");

//    res.setHeader("Access-Control-Max-Age","86400");

//    res.setHeader("Access-Control-Allow-Headers","Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma

//    res.setHeader("Access-Control-Allow-Credentials","true");

//    res.setHeader("XDomainRequestAllowed","1");

//    chain.doFilter(request, response);

       HttpServletResponse httpServletResponse = (HttpServletResponse) response;

          httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");

          httpServletResponse.setHeader("Access-Control-Allow-Headers", "accept,content-type");

          httpServletResponse.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT");

          chain.doFilter(request, httpServletResponse);

   }

Web.xml配置中加上

    <filter>

    <filter-name>cors</filter-name>

    <filter-class>main.java.com.skyi.ietm.common.base.CorsFilter</filter-class>

  </filter>

  <filter-mapping>

    <filter-name>cors</filter-name>

    <url-pattern>/*</url-pattern>

  </filter-mapping>

配置完成之後ajax就可以跨域請求資料了

然後是shiro許可權管理框架的搭建

匯入相關的shiro  jar包

加入shiro.xml配置檔案

加入shiro的基礎bean

然後是ajax請求的許可權管理問題

$.ajax({
    type: "GET",
    url: "http://localhost:8080/IETMSL/user/login",
    data: "userName=admin&pwd=123",
    //dataType: 'json',
    dataType: 'JSONP',
    jsonp:"jsonpCallback",
    jsonpCallback:" callback",
    success: function(msg){
         alert(6666);
    }
});

Ajax請求中的dataType引數使用JSONP

dataType: 'JSONP',

解決了跨域ajax請求的許可權管理問題

現在還有一個問題，jsonp跟json其實是個東西來的，後臺直接返回json資料的話，jsonp

是無法正確獲取的，需要把返回的json資料進行包裝

如：

callback({"data":{"stuNumber":"109074350","Username":"zhuxian","password":"123456"},"message":"登入成功","status":"OK"}) 

這裡參考文章如下：

java程式碼：

try{

res.setContentType("text/plain");

res.setCharacterEncoding("utf-8");

res.setHeader("Pragma", "No-cache");  

       res.setHeader("Cache-Control","no-cache");  

       res.setDateHeader("Expires",0);  

String jsonpCallBack = req.getParameter("callback");

HashMap map = new HashMap();

map.put("Username", "zhuxian");

map.put("password", "123456");

map.put("stuNumber", "109074350");

ResultInfo result = new ResultInfo();

PrintWriter out = res.getWriter();

result.setStatus("OK");

result.setData(map);

result.setMessage("登入成功");

toResultPrint(jsonpCallBack, result, out);

}catch(Exception e){

e.printStackTrace();

}

js程式碼：

先寫一個common.js用來存放一些通用的方法和一些常量

var classPath='http://121.42.45.17:8080/messageBox/';

 //將form表單轉化為json

    function serializeJson(frmId) {

      var jsonStr = '{';

      $($('#' +frmId).serializeArray()).each(function() {

      jsonStr += '\''+this.name + '\':\'' +this.value + '\',';

      });

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

      jsonStr += '}';

      return jsonStr;

      }

當然不用這個方法也可以，可以自己手動轉，表單內容不多也無所謂，如果一個表單幾十個資料要提交，

手動轉前臺會哭的。

function login(){

var datas = serializeJson('loginForm');//這一行是將登入介面的名叫loginForm的表單所有資料轉化為json字串，剛剛上面定義過了。如果不用這個也可以手動定義：vardatas={"name":"123","password":"123"}

var url=classPath+"test";//呼叫後臺服務的連結地址,classPath是前面說的common.js裡面定義的統一路徑,後面加上具體方法的路徑和一些引數就行,如果有引數則路徑為classPath+"test?引數名1=引數值1&引數名2=引數值2";

$.ajax({

type:"get",

async:false,

url:url,

dataType:'jsonp',//資料型別為jsonp 

jsonp:'callback',

//上面5行不用管也不用變

data:{'param':datas},//這一行是傳遞給後臺的資料，必須是json格式，如果沒有資料，就不需要這一行

jsonpCallback:'callback',//callback是一個名字 ，傳給後臺註冊下就行，最好就用"callback"，方便管理維護

//下面一行定義瞭如果呼叫後臺方法成功了就執行什麼操作,後臺會傳遞過來一個json格式的資料如：

//callback({"data":{"stuNumber":"109074350","Username":"zhuxian","password":"123456"},"message":"登入成功","status":"OK"}) 

//callback是傳遞給後臺的名字,裡面是內容；一般格式都是status狀態+data資料+message訊息，這個看個人喜好。

success:function(json){

//引數json就是上面例子的資料

if(json.status=='OK'){

alert(json.data.stuNumber);//輸出109074350

}

}

});

}

其他功能和這個都差不多了，方法名字改一下，呼叫的url改一下，傳遞的datas改一下就行，然後success之後，先判斷下json的status值是什麼，status的值是什麼代表什麼意思和後臺人員商量好就行、然後就可以處理json的data資料了，可以輸出，可以顯示到頁面的任何位置了。

看完這裡之後就有點頭緒了，使用谷歌提供的開源專案Gson  對任何資料轉化json資料

然後再對這個json資料進行修改，最後返回到前端！

這就完成了shiro對跨域ajax請求的許可權管理以及資料返回