如何存储 php 对象以在点击时使用 javascript 访问其数据

Question

我正在尝试找出最不显眼且计算成本最低的方式来存储来自我的 MySQL 数据库的 PHP 对象，以便用户点击时可以通过 JavaScript 呈现它们的数据。

目前，我将数据作为自定义属性存储在按钮上。但这会产生很多代码，我听说是“慢”。我想知道是否应该对我的 PHP 对象 $items（见下文）进行 JSON 编码，以及该 JavaScript 的外观。注意我在 PHP 中使用 Codeigniter，所以这就是备用 foreach 循环语法。

这是我目前使用 HTML/PHP 的地方：

<img id="img"></img><a id="url"></a> <!--elements where data is rendered on click-->
<? foreach($items as $item):?>  
<button data-id="<?=$item->id?>" data-url="<?=$item->url?>" data-img="<?=$item->img?>">click<?=$item->id?></button>
<?endforeach;?>

这是我的 JS：

$(document.body).on('click', 'button', function(){
   var $this=$(this), id=$this.data('id'), url=$this.data('url'), img=$this.data('img');
   $('#img').attr('src', img);
   $('#url').attr('href', url).html(url);
});

我网站的大部分数据都是通过 MySQL 来自 PHP 的，长期以来我一直对何时应该将该数据转换为 JavaScript 数组/JSON 的问题感到困惑。

Answer 1

如果你 json_encode 你的 $items 数组（假设它只包含你在 JS 中需要的数据），你可以将它分配给一个 JS 变量：

<script>var items = <?php echo json_encode($items); ?></script>

然后您可以删除data-url 和data-img 属性。然后，在您的 JS 代码中：

var $this = $(this), id = $this.data('id'), url = items[id].url, img = items[id].img;
// the rest of your code

编辑：当您将点击处理程序移动到单独的文件中时，您会得到如下内容：

function setup_click(items) {
    var $img = $('#img'), $url = $('#url');

    $('button').click(function(evt) {
           var id = $(this).data('id'),
           url = String(items[id].url),
           img=String(items[id].img);
       $url.attr('href', url).html(url);         
           $img.attr('src', img);
    });
}

这是一个展示 javascript/JSON 部分的 JSfiddle：http://jsfiddle.net/fz5ZT/55/

从您的模板中一次性调用它：

<script src="[your ext script file path].js"></script>
<script>setup_click(<?php echo json_encode($items); ?>);</script>

希望有帮助:)