如何在Javascript中动态设置数组？答案

【问题标题】：How to set an Array in Javascript dynamically?如何在Javascript中动态设置数组？
【发布时间】：2011-07-20 03:22:35
【问题描述】：

我正在开发一个电子商务网站。 javascript中有一个数组“products”，由以下代码定义

<script type="text/javascript">
    var products = 
    [
         {"id":"1","title":"Apple iPhone 4"},
         {"id":"2","title":"BlackBerry 9780 Bold"}
    ];
    /*some other javascript code*/
</script>

我希望这个数组根据查询数据库返回的行数动态更新。例如，假设我查询数据库并返回 5 行。我希望用这 5 行更新这个数组。请帮我完成这件事。我在 Windows 机器上使用 PHP、MySQL、Apache。

【问题讨论】：

是 AJAX 还是 PHP 返回包含硬编码数组的 HTML 页面？
@pimvdb PHP 正在返回硬编码数组。

标签： php javascript mysql html

【解决方案1】：

你想要push函数：http://www.w3schools.com/jsref/jsref_push.asp

var products = 
[
     {"id":"1","title":"Apple iPhone 4"},
     {"id":"2","title":"BlackBerry 9780 Bold"}
];

// Let's add a new phone:
products.push({"id":"3","title":"HTC Evo"});

/*
    products now equals: 
    [
         {"id":"1","title":"Apple iPhone 4"},
         {"id":"2","title":"BlackBerry 9780 Bold"},
         {"id":"3","title":"HTC Evo"}
    ];
*/

考虑到您可能有一个现有数组并且您想通过 ajax 更新它，您可以使用 PHP 动态执行此操作：

<script type="text/javascript">
<?php foreach($phones as $phone): ?>
    products.push({"id":"<?=$phone['id']?>","title":"<?=$phone['name']?>"});
<?php endforeach; ?>
</script>

【讨论】：

他试图从 PHP/MySQL 获取数据到 Javascript 数组，他没有尝试将一个 javascript 元素推送到 JS 数组...

【解决方案2】：

top answer to the question JSON encode MySQL results 可以为您实现这一目标：

$sth = mysql_query("SELECT ...");
$rows = array();
while($r = mysql_fetch_assoc($sth)) {
    $rows[] = $r;
}

print json_encode($rows);

在您的情况下，将最后一行替换为

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

将使用您的查询结果初始化 JavaScript 对象。这需要在页面加载之前完成，因为 PHP 在服务器上运行，为客户端生成 JavaScript。如果您需要在加载客户端页面后获取结果，则需要更复杂的解决方案，可能使用 AJAX。

【讨论】：

【解决方案3】：

我会创建一个服务器端脚本来连接数据库、获取产品并为您构建 JSON，因此您所要做的就是从客户端向脚本发出 AJAX 请求，然后它将返回所有内容供您在网页上使用。

【讨论】：

【解决方案4】：

您可以使用PHP将json直接输出到页面中。

假设$data 是一个包含您要输出的产品的数组。

在模板中你会做这样的事情：

<script type="text/javascript">
var products =  <?php echo json_encode($data) ?>;
</script>

【讨论】：

【解决方案5】：

products[products.length] = {..some data..};
products.push({..some data..});

或者你需要别的东西？

【讨论】：