Question

我在我的HTML中应用于数据属性的一些JSON数据上遇到了一些奇怪的行为，我使用修复程序但是我不知道为什么我需要应用此修复程序。我正在使用jquery-1.9.0

案例1 - 没有$.parseJSON()

工作

http://reelfilmlocations.co.uk/browse-locations/

在此页面上，我将数据属性应用于图像下方的图标，我将使用地图图标作为示例 map icon

html看起来像这样：

    <img
       src="/images/Icons/map circle.fw.png" width="24" height="24" 
       class="icon mapLink"
       data-location='{
           "id":"<?php echo($row_rs_locations['id_loc']);?>",
            "slug":"<?php echo($row_rs_locations['slug_loc']);?>",
            "page":"<?php echo($cur_page);?>",
            "lat":"<?php echo($row_rs_locations['maplat_loc']);?>",
            "lng":"<?php echo($row_rs_locations['maplong_loc']);?>",
            "pinType":"loc",
            "name":"<?php echo($row_rs_locations['name_loc']);?>",
            "linkType":"list"
      }'
    />

JSON对象：

{ "id":"5", "slug":"boston-manor-house-and-park", "page":"1", "lat":"51.492341", "lng":"-0.3186064000000215", "pinType":"loc", "name":"Boston Manor House and Park", "linkType":"list" }

我检查了http://jsonlint.com/，这确实是有效的json

点击地图图标时，我有以下jquery运行

$('.wrapper').delegate('.mapLink','click',function() {
            var myData = $(this).data('location');
            console.log(myData); // correctly logs json object
            $('.middle_section').hide();
            $('#mapContent').show();
            createMarkerWithInfo(myData, true); 
        })

一切都按预期工作，数据位置元素作为json读入，我可以将它用作json对象而不做任何其他事情

案例2 - 需要使用$.parseJSON()

http://2012.reelfilmlocations.co.uk/browse-locations/

这几乎与上述情况重复（此版本将针对移动设备进行优化）

代码几乎相同，只是click事件检索data-location元素，但是作为text而不是json对象，我需要先使用$.parseJSON(myData)对其进行解析才能使用它。

$('.wrapper').delegate('.mapLink','click',function() {
            //console.log('mapLink clicked');
            var myData = $(this).data('location');
            console.log(myData);// outputs text not a json object
            myData = $.parseJSON(myData) //parse the data
            console.log(myData);// outputs a JSON object
            $('.middle_section').hide();
            $('#mapContent').show();
            createMarkerWithInfo(myData, true); 
        })

我不明白为什么在两个脚本中，在effext中完全相同，我必须使用$ .parseJSON而另一个我不这样，对我来说似乎有些奇怪的行为，任何人都可以启发我吗？

Answer 1

你的第一个链接正在使用jQuery 1.9.0。

你的第二个链接，它不起作用，是使用jQuery 1.7.2。

它无法正常工作的原因是jQuery 1.7.2（您在该站点上使用的版本）使用的正则表达式/^(?:\{.*\}|\[.*\])$/无法检测到该属性包含正确的JSON因此不会将其传递给$.parseJSON。

jQuery 1.10.2使用的正则表达式/(?:\{[\s\S]*\}|\[[\s\S]*\])$/，正确检测到它具有JSON，并将其传递给$.parseJSON。（这个表达似乎对我很宽容，但是如果它传递了一些无效的东西并且解析失败了，它继续使用字符串。）据说他们将正则表达式固定在1.7.2和1.9之间。

Here's a test page使用jQuery 1.7.2在页面上第一个mapLink使用JSON：

<div id="test" data-location='{
                              "id":"1",
                              "slug":"watermans-arts-centre",
                              "page":"1",
                              "lat":"51.485768",
                              "lng":"-0.29806459999997514",
                              "pinType":"loc",
                              "name":"Watermans Arts Centre",
                              "linkType":"list"
                              }'></div>
<script>
  (function() {
    var test = $("#test");
    display("jQuery v" + test.jquery);
    display("typeof data: " + typeof test.data("location"));

    function display(msg) {
      $("<p>").html(String(msg)).appendTo(document.body);
    }
  })();
</script>

......输出：

jQuery v1.7.2

typeof data: string

...和here's that same page使用jQuery 1.10.2，输出：

jQuery v1.10.2

typeof data: object

Answer 2

来自jQuery文档：

当data属性是一个对象（以'{'开头）或数组（以'['开头）时，jQuery.parseJSON用于解析字符串;它必须遵循有效的JSON语法，包括引用的属性名称。如果该值不能作为JavaScript值进行解析，则将其保留为字符串。

http://api.jquery.com/data/#data2

因此，您的第二个JSON数据似乎很可能无效。

jquery json需要在使用之前从数据元素解析json

2 个答案: