【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.单位类型都是一样的，不知道为嘛第一个参数不报错。