【JSON】前後端取JSON值遇到的一些問題

【背景描述】

前端申請去後臺get返回數據，ajax成功返回的數據如何解析。

前端JS代碼：

function getInitialTableData(){
    $.ajax({
            data:{},
            type:"post",
            url:"IntialQueryServlet",
            dataType:"json",
            beforeSend: function (){
            //ajax刷新前加載load動畫
            showLoad();
            },
            success: function (dataArray) {
                //成功後返回數據準備解析                
            },
            error: function (e) {
                //隱藏load動畫
                hiddenLoad();
                alert("錯誤！ " + e.status);
            },
            complete: function () {
                //完成以後隱藏load動畫
                hiddenLoad();
            }
    });
}

後臺Servlet：從session取當前用戶的登陸信息然後傳給前臺

public class IntialQueryServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");

        //從session取當前登錄用戶名
        String username = (String) request.getSession().getAttribute("username");
        System.out.println("------session-----username: " + username);

        //定義要傳送到前端的JSON格式
        JSONObject jsonToJSP = new JSONObject();
        jsonToJSP.put("userflag",username);

        //輸出到前端
        PrintWriter pw = response.getWriter();
        pw.print(jsonToJSP);
        pw.flush();
        pw.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

 【解析方式】兩種寫法都可以

success: function (dataArray) {
    console.log(dataArray);
    var userflag = dataArray.userflag;
    // var userflag = dataArray['userflag'];
    alert("當前登錄的用戶是： "+userflag);
}

【另一個案例】

後臺Servlet：validate()是一個驗證上傳文件的函數

傳入前端的值有兩個：#->validateResult 和 #->insertState

@WebServlet("/uploadDataServlet")
public class uploadDataServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        /*設置字符集爲'UTF-8'*/
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");

        //設置一個驗證結果，true-上傳成功，false-上傳數據有問題，failed-上傳失敗, vcant-文件爲空
        String validateResult = validate(jsonArray);

        int insertState = 0;
        if(validateResult.equals("true")){
            //插入數據庫,如果插入成功會返回一個>0的值，否則返回0
            insertState = insertIntoDB(jsonArray);
            System.out.println("----------insertState--------" + insertState);
            if(insertState == 0){
                validateResult = "failed"; //文件上傳失敗
            }
        }

        JSONObject jsonObject = new JSONObject();
        jsonObject.put("validateResult",validateResult);
        jsonObject.put("insertState",insertState);
        System.out.println(jsonObject);

//        寫返回數據
        PrintWriter pw = response.getWriter();
        pw.print(jsonObject);
        pw.flush();
        pw.close();
    }
}

前端JS接收：

function uploadData(obj) {
    $.ajax({
                type: "post",
                url: "uploadDataServlet",
                data: {},
                datatype: "json",
                success: function (data) {
                    console.log(data);
                    //後天傳過來的值是一個string對象，需要先轉成JSON對象纔行
                    var jsonobj = JSON.parse(data);
                    console.log(jsonobj);
                    // var result = jsonobj.validateResult;
                    var result = jsonobj['validateResult'];
                    // var updateNum = jsonobj.insertState;
                    var updateNum = jsonobj['insertState'];
                    console.log(result+" "+updateNum);
                }
            });
}

第一個console.log(data)輸出：

第二個console.log(jsonobj)輸出：

tips：傳過來的值是string類型，必須先轉成JSON對象。 

回到第一個例子，如果在解析dataArray之前強制轉成JSON對象

console.log(dataArray);
var jsonobj = JSON.parse(dataArray);
console.log(jsonobj);
var userflag = jsonobj.userflag;
// var userflag = jsonobj['userflag'];
alert("當前登錄的用戶是： "+userflag);

 程序直接報錯：

不知道在什麼情況下傳回的dataArray會是string類型或者本身已經是JSON對象了，所以最好的方式是在解析之前進行一下類型判斷。

解決方式：var jsonobj = typeof dataArray=='string'?JSON.parse(dataArray):dataArray;

console.log(dataArray);
//判斷當前dataArray的類型
var jsonobj = typeof dataArray=='string'?JSON.parse(dataArray):dataArray;
console.log(jsonobj);
var userflag = jsonobj.userflag;
// var userflag = jsonobj['userflag'];
alert("當前登錄的用戶是： "+userflag);

【小結】

#-> JSON 轉 String類型：

String str = JSON.stringify(dataArray);

#-> String 轉 JSON類型：

var jsonobj = JSON.parse(dataArray);

【補充說明】

前面的兩個例子一個需要轉JSON一個不需要轉的原因在於ajax中是否聲明瞭正確的JSON類型

第一個例子：聲明瞭正確的JSON格式，所以不需要再轉JSON類型了。

第二個例子：未正確聲明JSON格式，會自動轉成String類型，所以必須強制轉JSON類型。

所以說寫代碼還是要再細心一點哪。 

 

------------------------------20190510---------------------更新------------------------------------------

寫程序的時候遇到了一個新問題：

渲染DataTable的時候，從data中取值顯示，顯示的時候希望字段帶上onclick鏈接，進行下一級查詢

data = "<a href='javascript:void(0);onclick=getTableData("+data.機構號+","+data.單位+")'>"+data.單位+"</a>";

顯示如下 

 

點擊後會報錯：說無法識別 ‘水果湖第一小學’ 這個字段

 

 解決辦法：將data.單位這個字段轉成string類型就可以了

data = "<a href='javascript:void(0);onclick=getTableData("+data.機構號+","+JSON.stringify(data.單位)+")'>"+data.單位+"</a>";

問題記錄：但很奇怪的是data.機構號類型和data.單位類型都是一樣的，不知道爲嘛第一個參數不報錯。