javascript - 将信息从 PHP 传递到 JQUERY 的方法？

Question

我很难弄清楚将信息从 PHP 传输到 Jquery 的最佳方式是什么。我知道将 PHP 放入 Javascript 中是一个非常糟糕的选择(无论如何，我的 JS 和 PHP 文件是分开的)，所以我通常做的是在 HTML 中使用 PHP 打印信息，隐藏输入类型，并使用元素检索 JQuery 中的信息.text() 或 .val() 或任何其他方法，但我觉得这有点菜鸟。有更好的办法吗？

Answer 1

我建议永远不要使用服务器端语言来构建 JavaScript。相反，将数据保存在 HTML(模型)中，将样式保存在 CSS( View )中，将交互保存在 JS( Controller )中。

当您需要将数据传递给 JavaScript 时，请充分利用属性和模板。

当涉及到通过属性传递数据时，仅使用 native 属性就可以大有帮助。

在此示例中，很明显该链接将打开一个模式，并且 [href]属性用于指向模态所在的位置:

<a href="#modal" class="modal-link">Open modal</a>
<div id="modal">lorem ipsum</div>

当您无法在 native 属性中容纳数据时，您应该使用 [data-*] attributes .

在此示例中，[data-tooltip]用于存储富文本工具提示。

<div data-tooltip="&lt;p&gt;lorem ipsum&lt;/p&gt;">...</div>

更重要的是，jQuery 自动抓取并转换所有 [data-*] .data() 时 DOM 节点上的属性在节点上调用。

<div id="example"
    data-foo="bar"
    data-fizz="true"
    data-max="100"
    data-options="{&quot;lorem&quot;:&quot;ipsum&quot;}">
    ...
</div>
<script>
    $('#example').data();
    /*
    {
        foo: 'bar',
        fizz: true,
        max: 100
        options: {
            lorem: 'ipsum'
        }
    */
</script>

需要注意的是 HTML 编码中的 JSON 编码。 jQuery 使得从 DOM 节点获取数据变得非常简单，无需担心解码，但在 PHP 中，您需要确保 json_encode 调用前的数据 htmlentities :

<div data-example="<?= htmlentities(json_encode($someArray)) ?>">...</div>

In some instances you may want to make use of jQuery's .attr() method .

<小时/>

对于大量数据，例如 HTML 模板字符串，您可以使用 <script>具有模板 MIME 类型的标签(例如 type="text/x-jquery-tmpl" ):

<script id="template-example" type="text/x-jquery-tmpl">
    <h1>${title}</h1>
    <p>${body}</p>
</script>

或者您可以使用HTML5 <template> element :

<template id="template-example">
    <h1>${title}</h1>
    <p>${body}</p>
</template>

然后，您可以访问该元素的 HTML 内容，并通过您最喜欢的字符串模板风格来运行它。