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

rmn190

浏览: 925136 次
性别:
来自: 北京

最近访客更多访客>>

Franciswmf

binjuny

andyLee520

ying_stone

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript/JSON/Ajax/ext...

json JavaScript Firebug HTML 浏览器

在使用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时单(双)引号的问题.

1
顶

0
踩

分享到：

You Used JavaScript to Write WHAT? | eval()方法有了点感觉

2008-03-26 10:20
浏览 7581
评论(4)
分类:Web前端
查看更多

4 楼 wangyu 2009-02-20

请问你的单(双)引号的问题怎么解决的呢? 我今天也遇到这个问题,能不能交流一下.

3 楼 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

2 楼 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呢?

1 楼 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");

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论