使用 Ajax 将 PHP 嵌入到 JavaScript 中，以便将 MySQL 数据存储在 JavaScript 对象

Embed PHP into javascript with Ajax in order to store MySQL data in javascript objects

本文关键字：JavaScript MySQL 数据 存储 对象 PHP Ajax 使用      更新时间：2023-09-26

用谷歌搜索这个问题的解决方案已经有一段时间了，似乎很多人都在问同样的事情。还没有找到一个有效的好答案。

我想做什么：我有一个简单的数据库，叫做"fruitStand"。它有一个名为"fruitTable"的表，其中包含两列：

**fruit**   **cost**
  apple        5
  pear         4
 banana        2
 orange        6

我可以使用PHP脚本轻松获取行，并直接在屏幕上显示结果。但是，我希望能够将结果放入我的javascript数组中，以便我可以基于它构建一些图形。

在考虑了这篇文章之后，我决定使用 Jquery Ajax 将 HTML/javascript 代码与 PHP 代码粘合在一起。我正在使用下面的两个文件（index.html和getData.php）以及数据库。当我点击"获取数据！"按钮时，这将生成以下HTML输出：

apple5pear4banana2orange6

现在进入实际问题：如何修改代码以便能够以 js 数组/对象形式返回结果？我希望它看起来像这样：

array1 = ["apple", "pear", "banana", "orange"]
array2 = [5,4,2,6]

最终目标是在绘制交互式图形时使用这些数组（稍后将添加按钮以选择水果/成本）。

索引.html文件：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("#display").click(function() {
     $.ajax({
       type: "GET",
       url: "getData.php",
       dataType: "html",
       success: function(response){
           var store = $("#responsecontainer").html(response);
       }
     });
   });
 });
</script>
<body>
<table border="1" align="center">
   <tr>
       <td> <input type="button" id="display" value="Get data!" /> </td>
   </tr>
</table>
<div id="responsecontainer" align="center"></div>
</body>
</html>

PHP 文件：

<?php
mysql_select_db('fruitStand',$con);
$result=mysql_query("select * from fruitTable",$con);
$con=mysql_connect("localhost","root","password");
if (!$con){
    die('Could not connect: ' . mysql_error());
}
while($data = mysql_fetch_row($result)){
    echo "$data[0]";
}
?>

如果我想将一个从php到Javascript的数据数组共享，我会使用JSON。

格式化您希望在 php 中使用的数组，然后使用 php 方法将 php 数组转换为 JSON json_encode。

在 js 中，使用 JSON.parse 将 JSON 解码为 Javascript 对象。

<html>
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<?php $phpArray = array(); ?>
<?php $phpArray = array(array('fruit' => 'green', 'cost' => 10), array('fruit' => 'blue', 'cost' => 9),array('fruit' => 'red', 'cost' => 8), array('fruit' => 'yello', 'cost' => 7));?>

<script>
    var fruit = [];
    var cost = [];
    var jsString = '<?php echo json_encode($phpArray);?>';
    var jsArray = JSON.parse(jsString);
    for(var i in jsArray){
        fruit[i] = jsArray[i]['fruit'];
        cost[i] = jsArray[i]['cost'];
    }
    console.log(fruit);
    console.log(cost);
</script>

预期的控制台输出：

["green", "blue", "red", "yello"]
[10, 9, 8, 7]

这应该可以帮助您入门。循环通过PHP而不是JAVASCRIPT。

<script>
    <?php
        $i = 0;
        while($row = mysql_fetch_array($result)){
            echo "fruit[$i] = '" . $row['fruit'] . "';";
            echo "cost[$i] = '" . $row['cost'] . "';";
            $i++;
        }
    ?>
    </script>
相关文章：