MySQL数据传JavaScript变量的实用方法

PHP与JavaScript数据交互：在JavaScript中使用MySQL数据

本文介绍如何将从MySQL数据库中提取的数据传递到JavaScript变量中进行计算。我们将通过一个实际案例演示如何实现PHP和JavaScript的数据交互。

场景描述

假设我们需要一个脚本进行价格计算，其中一个关键的价格乘数需要从MySQL数据库获取。 问题是如何将PHP从MySQL获取到的数据传递给JavaScript变量，并进行后续计算。

具体需求

1. PHP代码位置: PHP代码放置位置是否影响数据传递？
2. 数据传递: 如何将PHP从MySQL获取的价格值（例如“100.00”）传递给JavaScript变量，并确保JavaScript能够正确地进行计算（例如 1 * "100.00"）？

解答

为了将MySQL数据传递给JavaScript变量，我们可以利用json_encode()函数将PHP变量转换为JSON格式，然后在JavaScript中直接使用这些数据。

以下是一个改进后的代码示例：

<?php
// 连接MySQL数据库并提取数据
$mysql = new mysqli("xx", "xxxx", "xxx", "xxxx"); // 使用面向对象的方式连接数据库，更安全

if ($mysql->connect_error) {
    die("连接失败: " . $mysql->connect_error);
}

$reg_price_sql = "SELECT price FROM services WHERE serviceid = 1"; // 使用参数化查询更安全
$result = $mysql->query($reg_price_sql);

$reg_price = "";
if ($result) {
    $row = $result->fetch_assoc();
    $reg_price = $row['price'];
    $result->free_result(); // 释放结果集资源
} else {
    die("查询失败: " . $mysql->error);
}

// 同理获取 pri_price 和 exp_price，建议使用参数化查询避免SQL注入

$mysql->close(); // 关闭数据库连接
?>

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

    // 使用JSON数据
    var reg_price = <?php echo json_encode($reg_price); ?>;
    var pri_price = <?php echo json_encode($pri_price); ?>; //  需要补充pri_price和exp_price的PHP代码
    var exp_price = <?php echo json_encode($exp_price); ?>; //  需要补充pri_price和exp_price的PHP代码

    // 进行计算
    var a = (parseInt(teachingquant) * parseFloat(exp_price) + parseInt(drinkquant) * parseFloat(pri_price) + parseInt(dailyusequant) * parseFloat(reg_price)) * 1.2;
    document.getElementById('a').value = "£" + a.toFixed(2);
}

关键点

1. PHP代码位置: PHP代码可以在页面中的任何位置执行，只要在JavaScript需要使用数据之前执行即可。
2. 数据传递: 使用json_encode()函数将PHP变量转换为JSON格式，然后在JavaScript中使用parseFloat()或parseInt()函数将JSON数据转换为JavaScript数值类型进行计算。 这确保了数据的正确传递和类型转换。 注意： 代码中使用了parseInt()和parseFloat()来确保数据类型正确，避免潜在的类型错误。 同时，使用了更安全的数据库连接方式和参数化查询。

通过这种方法，可以安全有效地将MySQL数据传递到JavaScript变量中，完成所需的计算和处理。 记住始终对用户输入进行验证和过滤，以防止SQL注入和其他安全漏洞。