jquery - 为什么我的 jQuery 在使用它之前没有正确解析数据元素中的 JSON

Question

我在应用于 HTML 中的数据属性的一些 JSON 数据上遇到了一些奇怪的行为。我使用修复程序可以正常工作，但我不确定为什么需要应用此修复程序。我正在使用 jQuery 1.9.0。

情况 1 - 不使用 $.parseJSON()

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

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

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

当单击 map 图标时，我要运行以下 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/

这几乎是上述案例的重复(此版本将针对移动设备进行优化)

代码几乎相同，只是单击事件检索数据位置元素，但作为文本而不是 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); 
        })

我不明白为什么在两个完全相同的脚本中，我必须使用 $.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