ajaxFileUpload上傳檔案成功後卻無法解析伺服器返回的json資料

標籤：建立   UI   方法   伺服器   檔案   上傳檔案   frame   無法   pos   

• ajaxFileUpload是一款很好用的檔案上傳外掛程式，網上也有很多關於它的版本，但在上傳檔案成功後想返回json資料給前台時，卻會出現無法解析json資料的情況。

　　仔細調試發現其實在向伺服器提交資料後，是進入了success回呼函數的，只是沒有解析到json資料。那就說明伺服器做出了響應的，進入了success方法的，唯一的問題就是前台接受的資料不是json格式的。

　使用console.log輸出data發現並不是純粹的json資料,其中頭部多了<pre style="word-wrap: break-word; white-space: pre-wrap;">{"JsonKey":"JsonValue"}</pre>

　找到問題就很好處理了,雖然設定了data-type參數是json類型的，但依然出現了這個bug,再看一下源碼就豁然開朗了

　　=====這裡是源碼的內容==========

if ( type == "json" ) {
          eval( "data = " + data);
    }
=======================================
原來返回的json資料是通過eval產生的，意思是接受的資料一直是text類型的，只是根據data-type的參數再轉化，這是因為ajaxFileUpload是通過建立iframe層非同步來上傳檔案的

根據這個原理可以有2種解決辦法
1：在前台將<pre style="word-wrap: break-word; white-space: pre-wrap;">{"JsonKey":"JsonValue"}</pre>過濾，這樣就是乾淨的json資料

var reg = /<pre.+?>(.+)<\/pre>/g;  var result = data.match(reg);  data = RegExp.$1;
2：將源碼裡的eval裡的參數直接過濾
 if ( type == "json" ){
            data = jQuery.parseJSON(jQuery(data).text());
        }
再或者讓伺服器返回text類型的data再轉化成json資料

ajaxFileUpload上傳檔案成功後卻無法解析伺服器返回的json資料