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

JSON与HTML引号冲突

最新推荐文章于 2025-11-30 22:25:41 发布

最新推荐文章于 2025-11-30 22:25:41 发布 · 116 阅读

文章标签：

#json #JavaScript #Firebug #HTML #浏览器 #ViewUI

JavaScript/JSON/Ajax/ext... 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了在使用JSON传递数据到HTML时遇到的引号冲突问题，详细分析了不同解决尝试及其产生的错误，并最终认识到问题的本质是JavaScript操作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时单(双)引号的问题.