javascript - 在页面上存储 Ajax 请求数据的最佳方式

Question

我生成了一个页面，其中包含 php 生成的数据数组。我需要将其中一些数据用于 ajax 请求。

我只是想知道在页面上存储数据的最佳方式是什么，它不敏感并且页面不涉及表单。目前我一直在隐藏的 div 中使用 data- 属性，但看起来有点困惑？

例如。

<div id="data" class="hidden" data-question="<?= $blah ?>" data-another="<?= $blahblah ?>"></div>

Answer 1

虽然没有“最好”的方法，但我会推荐JSON -- 一种用于存储和交换数据的格式，似乎很适合您的情况。

不要在 html 元素的数据属性中存储任意数据，如下所示:

<div data-name="bob" data-age="27" data-gender="male" />

Json 允许您像这样存储它们:

people = {
    "bob" : {"age":"27", "gender":"male"},
    "alice" {"age":"31", "gender":"female"}
}

您可以通过几乎任何语言(尤其是 PHP 和 JavaScript)的 native 或库调用以编程方式访问此数据。

在 JavaScript 中，JSON 的访问方式如下:

BobsAge = people['bob'].age;

此格式允许其他编程访问，例如循环对象或键，这可能很难在 html 元素的数据属性上执行。

在你的情况下，JSON 可以像这样生成(尽管有更好的方法):

<script>
var data = {
<? foreach ($data as $d){ ?>
    { 
        "question" : "<? $d['question'] ?>",
        "answer" : "<? $d['answer'] ?>" 
    },
<?}?>
};
</script>