未捕获的SyntaxError:意外的输入结束在执行JSON.Parse时

时间:2014-06-03 13:16:16

标签: javascript php jquery html json

HTML& PHP:

<select id="package">
    <?php $package_size_array = array('size_a' => 70, 'size_b' => 90, 'size_c' => 130); ?>
    <option value="size" id="<?php echo json_encode($package_size_array, JSON_PRETTY_PRINT); ?>">Size</option>
    <!--Some more <option>s here...-->
</select>

JavaScript的:

$(document).ready(function() {  
    $('select#package').change(function() {
        var id = $(this).children(':selected').attr('id');
        alert(JSON.parse(id)); /* Line 217. in functions.js file */
    });
});

问题:Chrome和其他可能的浏览器&#39;控制台打印:

Uncaught SyntaxError: Unexpected end of input functions.js:217
(anonymous function) functions.js:217
jQuery.event.dispatch jquery.js:4371
elemData.handle

1 个答案:

答案 0 :(得分:7)

除非您转换为JSON的数据仅包含布尔值或数字,否则生成的JSON将包含"个字符。

您正在使用"个字符来分隔您的ID属性值,因此数据中的第一个字符将过早地结束该属性。

如果您检查了发送到浏览器的数据(使用view > source)而不是仅仅查看PHP,这将更加明显。

您需要将JSON的文本表示转换为它的HTML表示形式。

id="<?php echo htmlspecialchars(json_encode($package_size_array)); ?>"

您还应该删除JSON_PRETTY_PRINT,它对于调试很有用,但在实践中效率很低,并且新行不适合属性值。


也就是说,使用JSON作为ID值是个糟糕的主意。如果要在元素上存储任意数据,请使用a data-* attribute(您仍然需要将文本转换为HTML!)