не могу получить обновление php mysql из serializeArray

0

У меня есть страница 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>
  • 0
    date: JSON.stringify(data) внутри вашего метода .ajax
  • 0
    Что-нибудь выводится в консоли браузера? (Может быть стоит добавить сообщение об успехе в ваш PHP для отладки)
Показать ещё 4 комментария
Теги:

1 ответ

0

пойдите он, работая с помощью ответа Ghost на вопрос, здесь ref 25516865

я изменил myfunction на следующее, и все это работает

function myFunction() {
event.preventDefault();
var button = document.getElementById("onOff").value;
if (button == 1)
    id = 0;
else
    id = 1;
var params = $("#form_id").serializeArray();
params.push({name: 'onOff', value: id});

$.ajax({
    method: "POST",
    url: "dataUpdate.php",
    data: params,
    success: function(responseText) {
        console.log(responseText);
    }
});
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню