2

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

案例 1 - 没有工作$.parseJSON()

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

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

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/

这几乎是上述案例的复制品（此版本将针对移动设备进行优化）

除了单击事件检索数据位置元素之外，代码几乎相同，但作为文本而不是 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 而另一个我不使用，这对我来说似乎很奇怪，谁能启发我？

4

2 回答 2

2

您的第一个链接正在使用 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 之间的某个位置。

这是一个mapLink使用 jQuery 1.7.2 的页面上第一个使用 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

数据类型：字符串

...这是使用 jQuery 1.10.2的同一页面，它输出：

jQuery v1.10.2

数据类型：对象
于 2013-08-14T13:12:10.470 回答
1

来自 jQuery 文档：

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

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

所以看起来你的第二个 JSON 数据很可能是无效的。

于 2013-08-14T12:53:54.873 回答