AJAX -- 通过JSON完成多形态的数据格式传送

在使用AJAX完成前后台的异步交互（页面无刷新更新数据）时，我们经常会遇到需要传递多个值或者一个数组的数据到前台，此时网上有好多人，使用将多个数据通过逗号等标识符进行区分，然后前台使用split完成转换数组的形式，此种方案会存在BUG，一旦数据中包含标识符将会引起程序的错误。

这里我们使用JSON进行传输，也就是将要传输的数据转换成JSON的格式，然后前台JS对JSON进行解析，

JSON的API有很多，我常用的org.json、最近使用了一个叫jackson的工具包也很好用http://www.cnblogs.com/hoojo/archive/2011/04/22/2024628.html。

后台组装JSON

下面我摘取了下程序中的核心代码 ，

Map<String,String> jsonMap = new HashMap<String,String>();
        jsonMap.put("runTeamtablehtml",runTeamtablehtml);
        jsonMap.put("runTeamPagetablehtml",runTeamPagetablehtml);
        String json = JsonUtils.ObjtoJson(jsonMap);
        // 输出数据
        write(response,json);

这里我使用的项目中已经有的JSON工具包，JACKSON

public static String ObjtoJson(Object object) {  

        // Jackson方式转换为Json 
        MappingJsonFactory f = new MappingJsonFactory();   
        StringWriter sw = new StringWriter();  

        try {  
            JsonGenerator generator = f.createJsonGenerator(sw);  
            generator.writeObject(object);  
            generator.close();  

        } catch (Exception e) {  
            log.error(e.getMessage(),e);
            return "";  
        }  
        return sw.toString();  

    }

此时JSON工具包，将我们的MAP转换成了JSON格式的字符串。

前台解析JSON

function createData() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                var result = eval("("+req.responseText+")");
                document.getElementById("data").innerHTML = result.runTeamtablehtml;
                document.getElementById("data1").innerHTML = result.runTeamPagetablehtml;
                EvenFunc();
            } else {
                alert("不能得到描述信息:" + req.statusText);
            }
        }
    }

核心代码：var result = eval(“(“+req.responseText+”)”);，注意要使用eval，否则在获取属性的时候会出现undefined的错误，参考：http://liupeng-10408.iteye.com/blog/1113396。

原文地址：https://www.jb51.cc/ajax/162941.html