javascript - 如何将多个变量从 PHP 传递到外部 js 文件？

Question

我无法将多个变量从 PHP(从 mysql 获取数据后)传递到 js 外部文件。因此，如果我使用 echo $x_1，它可以传递给 html 文件中的 #watts_value 并正常显示。

但我想将变量$x_1传递给#watts_value，将$x_2传递给kwh_value。我已经尝试这样做，但它只是将所有值传递给 #watts_value。

我不知道如何将变量从 php 传递到 javascript。请建议我或告诉我如何做到这一点。

这是我的html

<div id="watts_value"></div>
<div id="kwh_value"></div>

这是我的 main.js

$(document).ready(function (){
	function read(){
		$.post("get_db.php", 
		function(data, status){
	
		if(status == 'success'){
			$('#watts_value').html(data);
		}
		else{
			$('#info').html("Error!");
		}
		});
	};
	read();
	setInterval(read,1000);
    });

这是我的 php 文件

<?php
$servername="localhost";
$username="root";
$password="";
$dbname="rt_db";
$tbname="rt_data";

$conn=new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
    die("Connection failed: ".$conn->connect_error);
}


$sql_1="SELECT * FROM $tbname WHERE SensorId ='1'";
$sql_2="SELECT * FROM $tbname WHERE SensorId ='2'";

$result_1=$conn->query($sql_1);
$result_2=$conn->query($sql_2);

if($result_1->num_rows>0){
    while($row=$result_1->fetch_assoc()){
        $x_1=$row['SensorData'];
        echo $x_1;
    }
}
if($result_2->num_rows>0){
    while($row=$result_2->fetch_assoc()){
        $x_2=$row['SensorData'];
        echo $x_2;
    }
}

else {
    echo "fail";
}

$conn->close();
?>

Answer 1

我建议创建一个 JSON 响应来获取不同的“变量”:

$jsonObject = ['WattsValue' => [], 'KwhValue' => []];

while($row = $result_1->fetch_assoc()){
    $jsonObject['WattsValue'][] = $row['SensorData'];
}

while($row = $result_2->fetch_assoc()){
    $jsonObject['KwhValue'][] = $row['SensorData'];
}

$conn->close();

header('Content-Type: application/json');
echo json_encode($jsonObject);
http_response_code(200);
exit;

当使用 jQuery 时，它会将其识别为 JSON 并提供直接使用 JSON 对象的能力:

$.post("get_db.php", 
    function(data, status){

    if(status === 'success'){
        $('#watts_value').text(data.WattsValue.join(','));
        $('#kwh_value').text(data.KwhValue.join(','));
    }
});