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

Question

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

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

例如。

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

Answer 1

尽管没有“最佳”方式，但我会推荐JSON——一种用于存储和交换数据的格式，并且似乎很适合您的情况。

而不是在 html 元素的 data-attributes 中存储任意数据，如下所示：

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

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

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

您可以通过几乎任何语言（尤其是 PHP 和 JavaScript）的本机或库调用以编程方式访问这些数据。

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

BobsAge = people['bob'].age;

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

在您的情况下，可以像这样生成 JSON（尽管有更好的方法）：

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

Answer 2

有三种可能：

• 属性：这是你的方法

  这对于简单的字符串（例如参数和描述性数据）可能是最好的——例如data-popover对于包含弹出内容的元素。许多 JS 插件都是这样构建的。

• PHP 在<script>标签中回显

  <script>在同一个文件中拥有标签的成本（以及可能使用全局 JS 变量）没有“额外的标记” 。我不建议这样做。

• 额外的 AJAX 调用从 PHP 中获取 JSON 数据

  最适合更复杂的数据结构，例如嵌套数组或对象。