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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/ajax/162941.html

猜你在找的Ajax相关文章