水质管理系统

最新推荐文章于 2024-10-02 16:50:28 发布

不悔哥

最新推荐文章于 2024-10-02 16:50:28 发布

阅读量169

点赞数 2

文章标签： linux 网络前端 tcp/ip c语言

本文链接：https://blog.csdn.net/buhuidage/article/details/138401530

版权

本文描述了一个基于HTML和JavaScript的水质管理系统，用户可以输入温度、PH值等水质参数，并通过模拟的Ajax请求将修改后的值提交给后端处理。展示了前端表单设计与基本的后端数据交换过程。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水质管理系统</title>
<style>
    /* 样式表 */
    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
    }
    input[type="number"] {
        width: 80px;
    }
</style>
</head>
<body>
<div class="container">
    <h2>水质管理系统</h2>
    <div>
        <label for="temperature">温度：</label>
        <span id="temperature">25°C</span>
        <span>(最小值: <input type="number" id="minTemperature" value="0">°C, 最大值: <input type="number" id="maxTemperature" value="100">°C)</span>
    </div>
    <div>
        <label for="ph">PH：</label>
        <span id="ph">7</span>
        <span>(最小值: <input type="number" id="minPH" value="0">, 最大值: <input type="number" id="maxPH" value="14">)</span>
    </div>
    <div>
        <label for="turbidity">浊度：</label>
        <span id="turbidity">10 NTU</span>
        <span>(最小值: <input type="number" id="minTurbidity" value="0"> NTU, 最大值: <input type="number" id="maxTurbidity" value="100"> NTU)</span>
    </div>
    <div>
        <label for="tds">TDS：</label>
        <span id="tds">500 ppm</span>
        <span>(最小值: <input type="number" id="minTDS" value="0"> ppm, 最大值: <input type="number" id="maxTDS" value="2000"> ppm)</span>
    </div>
    <div>
        <button onclick="submitValues()">提交</button>
    </div>
</div>
<script>
    // JavaScript 代码
    // 模拟后端传递的值
    var backendData = {
        temperature: "25",
        ph: "7",
        turbidity: "10",
        tds: "500",
        minTemperature: "1",
        maxTemperature: "100",
        minPH: "1",
        maxPH: "14",
        minTurbidity: "1",
        maxTurbidity: "100",
        minTDS: "1",
        maxTDS: "2000"
    };

    // 更新页面显示
    document.getElementById("temperature").innerText = backendData.temperature + "°C";
    document.getElementById("ph").innerText = backendData.ph;
    document.getElementById("turbidity").innerText = backendData.turbidity + " NTU";
    document.getElementById("tds").innerText = backendData.tds + " ppm";
    document.getElementById("minTemperature").value = backendData.minTemperature;
    document.getElementById("maxTemperature").value = backendData.maxTemperature;
    document.getElementById("minPH").value = backendData.minPH;
    document.getElementById("maxPH").value = backendData.maxPH;
    document.getElementById("minTurbidity").value = backendData.minTurbidity;
    document.getElementById("maxTurbidity").value = backendData.maxTurbidity;
    document.getElementById("minTDS").value = backendData.minTDS;
    document.getElementById("maxTDS").value = backendData.maxTDS;

    // 提交修改后的值给后端处理
    function submitValues() {
        var minTemperature = document.getElementById("minTemperature").value;
        var maxTemperature = document.getElementById("maxTemperature").value;
        var minPH = document.getElementById("minPH").value;
        var maxPH = document.getElementById("maxPH").value;
        var minTurbidity = document.getElementById("minTurbidity").value;
        var maxTurbidity = document.getElementById("maxTurbidity").value;
        var minTDS = document.getElementById("minTDS").value;
        var maxTDS = document.getElementById("maxTDS").value;

        // 在这里将修改后的值提交给后端处理
        // 可以使用Ajax或者表单提交等方式将数据发送到后端
        // 这里只是一个示例，实际操作应根据后端的接口进行处理
          // 构造要提交的JSON数据
    var data = {
        minTemperature: minTemperature,
        maxTemperature: maxTemperature,
        minPH: minPH,
        maxPH: maxPH,
        minTurbidity: minTurbidity,
        maxTurbidity: maxTurbidity,
        minTDS: minTDS,
        maxTDS: maxTDS
    };

    // 发起fetch请求
    fetch('url_to_your_backend_endpoint', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
        // 这里可以根据后端返回的数据进行相应的处理
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
        console.log("提交修改后的值给后端处理");
    }
</script>
</body>
</html>