Question

例如，我有一些来自数据库的数据，可以通过php获取。

我想通过一些花哨的javascript图表插件将数据显示为图表。

有两种方法可以完成这项工作。

首先，让php输出JS脚本中的行数据。如下面的代码，

chart.php

<?php
   $data=Array(); 
   //$data would be assigned some value from database
?>
<script>
   var data=[];
   data=<?php echo json_encode[$data];?>;
   draw_fancy_chart(data);
</script>

优点是这种方法非常有效。一旦从服务器请求页面，用户就会直接看到图表（假设draw_fancy_chart函数效率很高）。

但缺点是我无法提取JS脚本甚至在draw_fancy_chart.js上做一些缩小。所有用户都可以通过view-source查看我的JS。

第二种方法是使用AJAX。

chart_ajax.php

echo json_encode[$data];

chart.html

<script>
$.ajax({
  url: "chart_ajax.php"      
  }).done(function(data) {
    draw_fancy_chart(data);
   });
</script>

优点是我可以将所有JS脚本打包到JS文件中。但是用户体验很糟糕，由于ajax请求，用户将面对加载微调器。而且我们知道，不需要请求。

有人可以给我一个更好的解决方案吗？非常感谢。

Answer 1

第三个选项，在保持HTTP请求数量最少的同时保持分离：

<script>
var data = <?php json_encode($data)?>;
</script>
<script src="your-javascript.js"></script>

...然后your-javascript.js使用data。这里的缺点是data是一个全局变量，因此为它选择一个可能是唯一的名称以避免冲突（全局命名空间荒谬地拥挤）。

Answer 2

第二种方法更好。我认为用户体验不好。许多网站使用相同的技术。您可以控制UI的外观（例如，＆＃34;加载图表数据......＆＃34;等），总加载时间应与第一个解决方案几乎相同。

另一个优点是（如果你愿意）你可以不用重新加载整个页面就可以不断更新图表。

Answer 3

您可以缩小内联javascript。

如果您希望在一个请求中加载所有内容，您可以这样做：

<script>
    //Minified js for draw_fancy_chart

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

如果有大量数据，您应该考虑发出ajax请求，以便在加载数据时可以看到页面的其余部分。

Answer 4

    <script>

var data = <?php echo json_encode($data)?>;

</script>

json需要php echo，你会得到包含数据的javascript对象

Answer 5

首先，您应该考虑将您的draw_fancy_chart javascript代码作为T.J.提供给单独的js文件。克劳德指出。这适用于两种情况，这是最佳做法，因为它允许您缩小您的JavaScript代码，浏览器将能够缓存它以进一步请求。

关于数据，第二种方法在用户体验方面具有一些优势。

页面加载速度非常快（图表除外），然后用户只需要等待图表加载。这比等待整个页面加载更好，包括图表。在两种情况下，图表完成之前的总时间几乎相同，传输数据所需的网络带宽可能是瓶颈。

您将能够刷新图表而无需重新加载整个页面，使用另一个AJAX请求和相同的代码。

请记住，页面可能需要许多请求才能加载javascript文件，CSS，图像等。另外一个加载数据的请求不会产生差异

什么是将php发送的数据发送到javascript函数的更好方法

5 个答案: