我在Drupal建立了一个在线社区,其主页有点像Facebook墙。您会看到最近的25篇帖子,其中最近的两篇评论低于这些帖子。在这些评论下面还有一个textarea,以便您可以在特定帖子上快速发表新评论。
这些Facebook风格的帖子通过JavaScript内置了很多功能。单击帖子正下方的“查看所有评论”链接会发出一个AJAX调用,它会抓取该帖子的所有评论并在其下方显示。您还可以将帖子标记为有用,作为问题的解决方案,内联编辑注释等。所有这些操作都需要AJAX请求,这意味着发出请求的JavaScript需要知道基本信息,例如节点ID(唯一的)帖子的标识符),评论ID(评论的唯一标识符)等。
我最初的实现是将这些基本数据分散在各个帖子中,这使得编写需要查找它的JS变得更加复杂。所以我的第二个实现只是将所有这些数据输出到每个帖子的主包装元素中的JSON兼容字符串中。虽然这使JS更容易找到所需的数据,但将JSON写为字符串是一种痛苦(转义引号,没有换行符)。
所以现在我有第三个想法,我正在寻求实施前的反馈。我们的想法是为所有这些帖子创建一个单独的全局JS数组,其中包含保存每个帖子数据的对象。该数组中的每个元素都将保存AJAX调用所需的必要数据。所以它看起来像这样:
Facebook风格的帖子模板
<div class="post" data-postindex="<?php echo $post->index; ?>">
<!-- lots of other HTML for the post -->
</div>
<script type="text/javascript">
globalPostArray.push({
nid: <?php echo $post->nid; ?>,
authorID: <?php $post->authorID; ?>,
//etc. etc. etc.
});
</script>
上面代码的结果是,当点击一个需要AJAX请求的链接时,JS只会从该链接向上遍历DOM,直到找到主.post
元素。然后,它会获取data-postindex
的值,以便知道globalPostArray
中哪个元素包含所需的数据。
思考?我觉得必须有一些标准的,可接受的方式来完成这样的事情。
答案 0 :(得分:6)
我从来没有听说过在PHP和Javascript之间“传递”信息的标准方法,因为它们分别是服务器端和客户端语言。我个人会使用你的第二和第三种解决方案的混合体。
将post id存储在data-postindex属性中(数据属性是新的,以及“正确”存储少量数据的方式)。但我仍然只是使用JSON数组,因为在数据属性中存储大量数据(并转发它们!)可能会有问题。 PHP有一个json_encode
函数来处理所有的转义等等 - 只需像往常一样构建一个PHP数组(比如$postdata
),然后将它放在你的帖子模板中: / p>
<script type="text/javascript">
globalPostArray.push(<?php echo json_encode($postdata) ?>);
</script>
$postdata
如下所示:
$postdata = array(
'nid' => 5,
'authorId' => 45
...etc...
);
从现有代码生成这样的数组应该很容易。
我前段时间写了blog post关于我这种事情的实现,但听起来你需要的只是json_encode的指针。
答案 1 :(得分:4)
将任何PHP变量传递给JavaScript的最可靠方法是json_encode
。
<script type="text/javascript">
var something = <?php echo json_encode($var); ?>;
</script>
你不能传递闭包和资源,但不能传递任何游戏。
答案 2 :(得分:0)
我会将数据存储在元素中:
<div class="post" data-postindex="<?php echo $post->index; ?>"
data-nid="<?php echo $post->nid; ?>"
data-authorID="<?php echo $post->authorID; ?>">
...或在1个数据属性中存储完整的JSON字符串:
<div data-data="<?php echo htmlentities(json_encode($somedata));?>">
答案 3 :(得分:0)
我的答案和其他人一样,但更详细。我通常这样做,我认为这是最好的方法:(当然你可以使用ajax获取数据,但取决于上下文)
somefile.html
<html>
<head>..</head>
<body>
html code
<script>
window.my_data = <?php echo json_encode($my_php_var); ?>
</script>
</body>
</html>
somefile.js
$(function() {
window.myitem = new myClass(window.my_data);
});
var MyClass = function(init_data) {...}