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文件中。

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

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