JSON - 前台页面与后台数据交互

版权声明： https://blog.csdn.net/linmengmeng_1314/article/details/81748514

参考文章：https://blog.csdn.net/j080624/article/details/72780660

在开发过程当中前后台数据交互使用的频率还是很高的，这里记录一个小例子，实现后台返回JSON字符串到前台，前台接收并使用。

参考上面的博客中提到的第三种方法：

后台返回json对象，页面用单引号包括取值

-1. 首先是后台的controller类先对查询的数据进行转化成JSON字符串

    @RequestMapping("/macMap")
    public String MachineMap(HttpServletRequest req, HttpServletResponse resp,String macId){
        Map<String, Object> partMachine = machineService.selectPartMachine(macId);
        String machineMap = JSON.toJSONString(partMachine);
        System.out.println(machineMap);
        req.setAttribute("machineMap", machineMap);
        return "machine/machineMap";
    }

这里返回的JSON字符串为：{“macLatitude”:”34.730222”,”macLongitude”:”113.808803”}

-2. 前台的machine.jsp页面获取到后台返回的JSON字符串，并处理

<script>
    var machineMap = '${machineMap}';//注意，使用了单引号包括
    var macLatitude='';
    var macLongitude='';

    //即使后台传参为null，页面也只是会拿到一个 ''不会抛异常。
    if(typeof machineMap != 'object' && machineMap != ''){
        machineMap = eval("(" + machineMap +")");
        alert("macLatitude:" + machineMap.macLatitude + "\nmacLongitude:" + machineMap.macLongitude);
        //下面利用参数接收，并直接使用
        //macLatitude = machineMap.macLatitude;
        //macLongitude = machineMap.macLongitude;
    }
</script>

进入页面之后会弹出接收的数据，如下图所示：

问题：

使用JSON.toJSONString()转化字符串的时候会遇到中文数据传到jsp页面乱码的的现象

解决方法：
将方法返回的标识写成这样即可：@RequestMapping(value="/orderList",produces = "text/plain;charset=utf-8")

如果还不能解决中文乱码的情况，则需要使用JsonResult<>工具类来封装数据，再返回即可解决中文乱码
JsonResult工具类的使用，参考：https://blog.csdn.net/linmengmeng_1314/article/details/81748966