Question

我有一个显示温度的HTML页面和两个按钮，一个用温度设置更新mysql，另一个用开/关数据更新（1 = ON 0 = OFF）

没有开/关按钮，所有工作正常，使用以下代码。

function myFunction() {
var button = document.getElementById("onOff").value;
if (button == 1)
    button = 0;
else
    button = 1;
// AJAX code to submit form.
$.ajax({
method: "POST",
url: "dataUpdate.php",
data: $('#form_id').serialize(),
cache: false,
success: function(responseText) {
console.log(responseText)
}
});
}

我在HTML中添加了按钮

    <button class="demand" onclick="myFunction()" id="onOff" value="">On/Off</button>

然后我将JavaScript更改为此

function myFunction() {
var button = document.getElementById("onOff").value;
if (button == 1)
    button = 0;
else
    button = 1;

// AJAX code to submit form.
var data = $('#form_id').serializeArray();
data.push({name: 'onOff', value: button});
$.ajax({
method: "POST",
url: "dataUpdate.php",
date: $.param(data),    
cache: false,
success: function(responseText) {
console.log(responseText)
}
});
}

但它现在没有更新数据库。这可能是php脚本的一个问题，所以我在下面发布了这个

<?php
$roomStat = ($_POST['thermostat']);
$onOff = ($_POST['onOff']);

if ($roomState == ''){$roomState = 1;}
try
{
    $pdo = new PDO('mysql:host=localhost; dbname=office', 'phpmyadmin', 
'Odiham');
}
catch (PDOException $e)
{
    echo 'Error: ' . $e->getMessage();
    exit();
}
$id = 1;

$sql = "UPDATE heating SET stateSetting = :roomStat, heatingState = :onOff WHERE id = :id";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':id', $id);
$stmt->bindParam(':roomStat', $roomStat);
$stmt->bindParam(':onOff', $onOff);
$stmt->execute();
// close connection_aborted
$conn = null;
?>

下面的

是完整的HTML页面

<script>
var count =  1;
var gaugeData = function(){
     $.ajax({
        url:"data.php",
        dataType:"json",
        success: function(data){
            console.log(data);
            if (data.temp <= 15){
                document.getElementById("RoomTemp").style.color = '#00FFFF';
            }
            if (data.temp > 15 && data.temp < 21){
                document.getElementById("RoomTemp").style.color = '#FF9900';
            }
            if (data.temp >= 21){
                document.getElementById("RoomTemp").style.color = '#FF3300';
            }
            if (count == 1){
                count = 0;
                $('#thermostat').val(data.thermostat);
                sliderFunction();
            }
            $("#RoomTemp").html(data.temp + '&deg;C');
            var s = document.getElementById("onOff");
            s.value = data.state;
            }
    });
 }
function sliderFunction(){
    var currentValue = $('#currentValue');
    $('#thermostat').change(function(){
        currentValue.html(this.value);
    });
    $('#thermostat').change();
};

setInterval (gaugeData, 1000);
function myFunction() {
var button = document.getElementById("onOff").value;
if (button == 1)
    button = 0;
else
    button = 1;

// AJAX code to submit form.
var data = $('#form_id').serializeArray();
data.push({name: 'onOff', value: button});
$.ajax({
method: "POST",
url: "dataUpdate.php",
date: $.param(data),    
cache: false,
success: function(responseText) {
console.log(responseText)
}
});
}
</script>
</head>
<body onload="gaugeData()">

<div class="row">
<div class="col-12">
<div class="row">
        <div class="col-5">
        </div>
        <div class="col-2">
            <div class="header"><h1>Office Heating</h1></div>
        </div>
        <div class="col-5">
        </div>
</div>
</div>
<div class="row">
<div class="col-12">
    <div class="row">
        <div class="col-5">
        </div>
        <div class="col-2">
            <div class ="waterTile">
                <p class="GW"> Temperature</p>
                <div class="G" id="RoomTemp"></div>
                <form name="form" id="form_id">
                <div class="thermostatSlider"><input id="thermostat" name="thermostat" type="range" min="0" max="30" value="" class="slider" /></div>
                <div class="setid" id="setid">Set</div>
                <div class="SliderValue" id="currentValue"></div>
                <div class="item active">
                <button class="btn" onclick="myFunction()">Update</button>
                <button class="demand" onclick="myFunction()" id="onOff" value="">On/Off</button>
                </div>
                </form>
            </div>
        </div>
        <div class="col-5">
        </div>
    </div>
</div>
</div>
</body>
<script>
document.getElementById("thermostat").addEventListener("change", changeFunction);
function changeFunction() {
document.getElementById("currentValue").style.color = '#FF3300'
document.getElementById("setid").style.color = '#FF3300'
document.getElementById("RoomTemp").style.color = '#FF3300'
}
 </script>
 </html>

Answer 1

在Ghost回答问题的帮助下工作这里参考25516865

我将myfunction更改为以下内容并且一切正常

            RequestorEP = null;
            byte[] buffer = client.Receive(ref RequestorEP);

无法从serializeArray获取php mysql更新

1 个答案: