PHP数据如何传给JS变量？MySQL数据库交互详解

本文介绍如何将PHP从MySQL数据库获取的数据传递给JavaScript变量进行计算。传统方法直接在JavaScript中嵌入PHP代码是错误的，因为JavaScript运行在客户端，而PHP运行在服务器端。正确的做法是：PHP从数据库获取数据后，使用`json_encode()`函数将其转换为JSON格式，再通过Ajax请求将数据传递给JavaScript。JavaScript接收数据后，进行计算并更新页面。文中提供改进后的PHP代码（getdata.php）和JavaScript代码，以及HTML结构示例，有效解决了跨端数据交互问题，并提升用户体验。 关键词：PHP, MySQL, JavaScript, AJAX, JSON, 数据库, 数据交互

从php获取mysql数据并赋值给javascript变量

本文将解决如何将php从mysql数据库中提取的数据传递给javascript变量的问题。 用户希望在javascript中进行计算，其中部分数据需要从mysql数据库中获取。 原始代码尝试在javascript代码中直接嵌入php代码，但这并非正确的方法。

用户提供的代码试图在javascript函数displaytotcost()内直接使用php代码来连接数据库并获取价格数据。这种做法会导致错误，因为javascript运行在客户端浏览器，而php运行在服务器端。 浏览器无法直接执行php代码。

正确的做法是使用php从数据库中获取数据，然后将其以javascript能够理解的格式（例如json）发送到客户端。 javascript再从接收到的数据中提取所需的值进行计算。

以下是改进后的代码：

首先，修改php部分，从数据库获取数据后，使用json_encode()函数将数据转换成json格式。 这部分代码应该单独作为一个php文件（例如getdata.php），而不是嵌入到html文件中。

<?php
header('content-type: application/json'); // 设置响应头为json格式

$mysql = mysql_connect("xx", "xxxx", "xxx"); // 请替换为你的数据库连接信息
mysql_select_db("xxxx"); // 请替换为你的数据库名称

$reg_price_sql = "select price from services where serviceid=1";
$result = mysql_query($reg_price_sql) or die(mysql_error());
$reg_price = 0; // 初始化，防止数据未找到
while ($result_row = mysql_fetch_array($result)) {
    $reg_price = $result_row['price'];
}

$pri_price_sql = "select price from services where serviceid=2";
$result = mysql_query($pri_price_sql) or die(mysql_error());
$pri_price = 0; // 初始化，防止数据未找到
while ($result_row = mysql_fetch_array($result)) {
    $pri_price = $result_row['price'];
}

$exp_price_sql = "select price from services where serviceid=1";
$result = mysql_query($exp_price_sql) or die(mysql_error());
$exp_price = 0; // 初始化，防止数据未找到
while ($result_row = mysql_fetch_array($result)) {
    $exp_price = $result_row['price'];
}

$data = array(
    'reg_price' => $reg_price,
    'pri_price' => $pri_price,
    'exp_price' => $exp_price
);

echo json_encode($data);

mysql_close($mysql);
?>

然后，修改javascript部分，使用ajax从getdata.php获取数据：

function displaytotcost() {
    var teachingquant = document.getElementById("txtteachingitemsquant").value;
    var drinkquant = document.getElementById("txtdrinksquant").value;
    var dailyusequant = document.getElementById("txtdaliyusagequant").value;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'getdata.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            var reg_price = parseFloat(data.reg_price);
            var pri_price = parseFloat(data.pri_price);
            var exp_price = parseFloat(data.exp_price);

            var a = (teachingquant * exp_price + drinkquant * pri_price + dailyusequant * reg_price) * 1.2;
            document.getElementById('a').value = "£" + a.toFixed(2);
        } else {
            console.error("Error fetching data from server:", xhr.status);
        }
    };
    xhr.onerror = function() {
        console.error("Network error fetching data from server.");
    };
    xhr.send();
}

最后，你的html结构需要包含一个用于显示结果的元素，例如 <input type="text" id="a">。 记得将 getdata.php 放置在你的web服务器可以访问的目录下。 这套方案有效地将php和javascript代码分离开来，避免了直接在javascript中嵌入php代码的错误。 同时使用了ajax异步请求数据，提高了用户体验。

好了，本文到此结束，带大家了解了《PHP数据如何传给JS变量？MySQL数据库交互详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！