我很难弄清楚将信息从 PHP 传输到 Jquery 的最佳方式是什么。我知道将 PHP 放入 Javascript 中是一个非常糟糕的选择(无论如何,我的 JS 和 PHP 文件是分开的),所以我通常做的是在 HTML 中使用 PHP 打印信息,隐藏输入类型,并使用元素检索 JQuery 中的信息.text() 或 .val() 或任何其他方法,但我觉得这有点菜鸟。有更好的办法吗?
最佳答案
我建议永远不要使用服务器端语言来构建 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="<p>lorem ipsum</p>">...</div>
更重要的是,jQuery 自动抓取并转换所有 [data-*]
.data()
时 DOM 节点上的属性在节点上调用。
<div id="example"
data-foo="bar"
data-fizz="true"
data-max="100"
data-options="{"lorem":"ipsum"}">
...
</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 内容,并通过您最喜欢的字符串模板风格来运行它。
关于javascript - 将信息从 PHP 传递到 JQUERY 的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18994477/