1. 程式人生 > >一個前後端json使用的誤區

一個前後端json使用的誤區

後端傳到前端的字串,只要前端以json接收,用console.log()顯示時候就是標準的json格式,但是使用迴圈遍歷就是字串的格式。看一下案例程式碼:
後端程式碼如下

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                response.setHeader("Pragma", "No-cache");
                response.setHeader("Cache-Control"
, "No-cache"); response.setDateHeader("Expires", 0); response.setContentType("text/html;charset=utf-8"); Object result=JsonString.getJsonString(); String json = JSON.toJSONString(result); response.getWriter().print(json); }
public class JsonString {
    public static String getJsonString() throws IOException {
        String JsonStringValues=null;
        File file=new File(JsonString.class.getResource("/data.json").getFile());
        return  JsonStringValues=FileUtils.readFileToString(file, JsonStringValues);
    }
}

一看成功使用fastjson成功完成轉化,
接著就是前端的接收資料(使用的是mui框架,其它也是類似的可以有參考意義的)

mui.ajax("GetDataServlet", {
                dataType : "json", //伺服器返回json格式資料
                type : "get", //HTTP請求型別
                timeout : 10000, //超時時間設定為10秒;
                headers : {
                    "Content-Type" : "application/json"
                },
                success : function(data) {
                    console.log(data);
                    //伺服器返回響應,根據響應結果,分析是否登入成功;
                    var html = template("test", data);
                    document.getElementById("list").innerHTML = html;

                },
                error : function(xhr, type, errorThrown) {
                    //異常處理;
                    //console.log(type);
                }
            });
<script id="test" type="text/html">{{each stories as value i}}
        <li style="width:100%;height: 75px;background-color: #FFFFFF;padding: 10px;margin-bottom: 10px;overflow: hidden;">
            <span style="float: left;width: calc(100% - 72px);">
                {{value.title}}
            </span>
            <span style="float: right;margin-left: 10px;">
                <img width="62px" height="55px" src="{{value.images[0]}}"/>
            </span>
        </li>
        {{/each}}</script>

顯示都一堆字串格式的東西,
這裡寫圖片描述
這時就使用console.log(data);打印出來接收到的東西,確實json格式,
這裡寫圖片描述放在標籤裡面顯示字串。這是就出現前後端的互不承認問題所在。最後採取使用一般寫死的json在前端處理,沒有問題,排除了前端的框架錯誤,才好好的看後端程式碼。
在後端加上System.out.println("println.json=" + json);
列印在控制檯確實是字串,原來轉混亂了。最後Servlet中的get方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 設定
                // 設定不快取圖片
                response.setHeader("Pragma", "No-cache");
                response.setHeader("Cache-Control", "No-cache");
                response.setDateHeader("Expires", 0);
                response.setContentType("text/html;charset=utf-8");
                /*response.setContentType("text/text;charset=utf-8");*/
                // 指定生成的相應圖片
                Object result=JsonString.getJsonString();
                //String json = JSON.toJSONString(result);
                System.out.println("println.json=" +result);
                response.getWriter().print(result);
    }

實現了前端的
這裡寫圖片描述
這時再來看看前端的console.log(data);顯示
這裡寫圖片描述
後端的顯示也是jsong格式
這裡寫圖片描述
這才是正確的傳輸方式;
總結:
(1)後端json是否傳對看後臺控制檯是否為json格式
(2)前端檢查是否接收的是正確格式的object物件,前端以json格式接收實際是接收的json的object物件。

備註
後端加入了一個jar包
commons-io-1.4.jar
前端:
這裡寫圖片描述