Uncaught SyntaxError：執行JSON.Parse時輸入意外結束

Question

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和其他瀏覽器的控制台打印：

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

Answer 1

除非您要轉換為JSON的數據僅包含布爾值或數字，否則生成的JSON將包含"字符。

您正在使用"字符來分隔ID屬性值，因此數據中的第一個字符將過早結束該屬性。

如果您檢查了發送到瀏覽器的數據（使用view > source而不是僅查看PHP），則將更加明顯。

您需要將JSON的文本表示形式轉換為HTML形式。

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

您還應該刪除JSON_PRETTY_PRINT，它對調試很有用，但在實踐中效率低下，新行不適用於屬性值。

---

也就是說，使用JSON作為ID值是一個糟糕的主意。 如果要在元素上存儲任意數據，請使用data-*屬性 （不過，您仍然需要將文本轉換為HTML！）