0

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

4

2 回答 2

1

您可以简单地将 PHP 变量回显到 Javascript 变量中供您的 jQuery 使用，如下所示：

<?php
$stringVar = "hi";
$numVar = 1.5;
?>

<script>
var stringVar = "<?php echo $stringVar; ?>";
var numVar = <?php echo $numVar; ?>;
</script>

这几乎可以用于任何数据类型，只要您在回显时正确转换它（json_encode()对于复杂结构，例如数组和对象，通常就足够了）。

另请注意，只有在定义这些变量之后包含您的 jQuery 代码时，这种方式才有效。

另一种方法是研究使用 AJAX，但如果这些是在页面生命周期内不需要更改的静态变量，那么我会使用上面的方法。

于 2013-09-25T01:01:39.127 回答
1

我建议永远不要使用服务器端语言来构建 JavaScript。相反，将数据保存在 HTML（模型）中，将样式保存在 CSS（视图）中，将交互保存在 JS（控制器）中。

当您需要向 JavaScript 传递数据时，请善用属性和模板。

当涉及通过属性传递数据时，仅使用本机属性就可以走很长一段路。

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

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

当您无法将数据放入原生属性中时，您应该使用[data-*]attributes。

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

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

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

<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 编码。json_encodejQuery 使得从 DOM 节点中获取数据变得非常简单，无需担心解码，但在 PHP 中，您需要在调用之前确保数据htmlentities：

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

在某些情况下，您可能想要使用 jQuery 的.attr()方法。

对于大量数据，例如 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>元素：

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

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

于 2013-09-25T01:31:45.753 回答