2008-03-26

在使用JSON时的一点麻烦事.

在使用JSON时的一点麻烦事.



问题的是这样的,当用JSON传回数据在HTML上用时总有双(单)引号的问题,即把JSON里的数据赋给HTML里某一元素的value属性时JSON值里的双(单)引号与HTML本身的引号就混在一起了.鼓捣了半天也没搞定,真是郁闷.

下面是一个简化的例子.

<html>
    <script  Language="javascript">
        //这个menuList是利用JSON从Java端传回的数据.
        var menulist = {"MenuList":
                        [{"cMenuText":"Valentine's Day test","cMenuTypeID":1},
                         {"cMenuText":"User Request","cContentTypeID":8}]
                      };
    </script>

    <ul>
        <script Language="javascript">
            var strCheckBox;
            for( i=0; i<menulist.MenuList.length; i++ ){
                var menuWrapper = menulist.MenuList[i];
                
                document.write("<li class='treeItem' id='db_cartridgeID_contentTypeID'>");
                
                strCheckBox =  "<input type='checkbox'  value='' >";            // ..............(1)                
                
                document.write(strCheckBox+"</li>");
            }
        </script>
    </ul>
</html>

麻烦事就是(1)处value的赋值.本来是想把menuList里的"cMenuText"和"cMenuTypeID"的值拼成一个字符串放到这里的,可拼的过程中总有引号出错的问题.

下面是我试过的几种途径:
1,直接在(1)处把menulist中相应数据拼出来.
    即:value = 'menuWrapper.cMenuText+menuWrapper.cMenuTypeID'

    这样处理后,用firebug看结果如下:
    <li id="db_cartridgeID_contentTypeID" class="treeItem">
        <input type="checkbox" value="menuWrapper.cMenuText+menuWrapper.cMenuTypeID"/>
    </li>

    这显然不对,浏览器根本就没有解析menuWrapper.cMenuText而直接把它当字符串放在这里.

2,在(1)处拼串时去掉单引号,即:
    value = menuWrapper.cMenuText+menuWrapper.cMenuTypeID

    结果与上面的一样:
    <li id="db_cartridgeID_contentTypeID" class="treeItem">
        <input type="checkbox" value="menuWrapper.cMenuText+menuWrapper.cMenuTypeID"/>
    </li>

3,把(1)处的整个一句改为:
    strCheckBox =  "<input type='checkbox'  value = "+menuWrapper.cMenuText+menuWrapper.cMenuTypeID + "/>";        

    这样比上面的两个好些,结果如下:
    <li id="db_cartridgeID_contentTypeID" class="treeItem">
        <input type="checkbox" test1="" day="" value="Valentine's"/>
    </li>

    到这里问题引出来了,也就是menuWrapper.cMenuText的值,也就是"Valentine's Day test"在浏览器里被拆开了,而这个拆的过程是以空格和单引号为delimitor,这样与HTML自身的单引号或空格就混了从而造成了HTML里有了test1和day这样的属性.

.............................

写到这里也渐渐清晰了,这个问题实际上与JSON一点关系都没有,问题的根本在于用JavaScript操作HTML时单(双)引号的问题.
评论
rmn190 2008-03-27
myData = JSON.parse(text, function (key, value) {
return key.indexOf('date') >= 0 ? new Date(value) : value;
});

完全可以利用这个function来将引号进行转义处理嘛.

http://www.json.org/js.html
rmn190 2008-03-27
A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes(http://www.json.org/):

这里提到了"using backslash escapes",这样那个单双引号问题就可以解决了.

前一步想,是不是在JSON的各种语言支持里是否有这种自动转义的处理method呢?
rmn190 2008-03-27 

var item = "<li><img src='../images/bullet_toggle_plus.png' width='18' height='18' class='expandImage' /><img class=folderImage src='../images/folder.png' /><span class='textHolder'>"+newNodeName+
                               "</span>"+
                               "<input type='checkbox' id = "+newNodeName+"_"+
                               "_box_menu class='categoryNodeSelector' value='"+ nodeValue +"'/>"+
                               newNodeOrder + " : " + newNodeStartDate + " - " + treatedNodeEndDate +"</li>";

                    var branches = $(item).appendTo("#cartridge");
发表评论

您还没有登录，请登录后发表评论