Ajax change le bouton sur le site Web de PHP

Question

J'essaye de changer sans actualiser le statut de mon bouton sur ma page de PHP.
Je suis nouveau dans le code JavaScript et je vois que les solutions à mon problème utilisent une requête AJAX.

Je l'ai fait:

function accendi(str) { 

    //controllo se id è vuoto 
    if (str == "") { 
    document.getElementById("txtHint").innerHTML = ""; 
    return; 
    //altrimenti invio la richiesta 
    } else { 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
     console.log(xmlhttp); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("txtHint").innerHTML = this.responseText; 
     } 
    }; 
    //manda la stringa alla pagina accendi.php 
    xmlhttp.open("GET","accendi.php?q="+str,true); 
    xmlhttp.send(); 
    } 
} 

function spegni(str) { 

    if (str == "") { 
    document.getElementById("txtHint").innerHTML = ""; 
    return; 
    } else { 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
     console.log(xmlhttp); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("txtHint").innerHTML = this.responseText; 
     } 
    }; 
    xmlhttp.open("GET","spegni.php?q="+str,true); 
    xmlhttp.send(); 
    } 
} 

<div class="container"> 

    <section> 
    <header> 
     <h2 align="center"> Gestione luci </h2> 
     <br> 
     <br> 

<?php 

$fp=pfsockopen("192.168.1.100",23); 
if (!$fp) { 
    echo("<script>alert('Dispositivo non collegato')</script>"); 
    echo("<script>window.location = 'home.php';</script>"); 
} 
else { 
    for ($x = 0; $x < $numrows; $x++) { 

    $resrow = mysqli_fetch_row($rest); 
    $id= $resrow[0]; 
    $userT= $resrow[1]; 
    $statusT = $resrow[2]; 
    } 

if($statusT==0){ 

    echo "<form method=\"post\" onSubmit=\"accendi($id)\"><p align=center> 
    <br> Stato luci : Spente &nbsp;<img src=\"images/rosso.jpg\">&nbsp;&nbsp; 
    <input type=\"submit\" name=\"invio\" value=\"Accendi\"> 
    </p></form>"; 
} 
else if($statusT==1){ 

    echo " <form method=\"post\" onSubmit=\"spegni($id)\"><p align=center><br>Stato luci : Accese &nbsp;<img src=\"images/verde.jpeg\">&nbsp;&nbsp;<input type=\"submit\" name=\"invio\" value=\"Spegni\"> 
    </p></form>"; 
} 

Et cela (une pour la fonction), dans deux pages PHP différents:

require_once('connection.php'); 

$q = intval($_GET['q']); 

$sql= "UPDATE luciajax SET stato=1 where id='".$q."'"; 

if ($connection->connect_error) { 
    die("Connection failed: " . $connection ->connect_error); 
} 

//se connessione funziona accendo arduino 

if ($connection ->query($sql) === TRUE) { 
    $fp=pfsockopen("192.168.1.100",23); 

    fputs($fp,"1"); 

    fclose($fp); 

} 

else { 
echo "Error updating record: " . $connection ->error; 
} 

$connection ->close(); 

Mais mon bouton souvent ne fonctionnent pas bien. Parfois, le statut ne change pas, mais la base de données et le code PHP fonctionnent correctement.

Answer 1

Vous avez défini un gestionnaire en ligne onsubmit sur votre form ... Ce qui est correct.

Mais le "comportement normal" d'un formulaire de soumission est de se soumettre à la ressource fournie dans l'attribut action. Quand il manque, le formulaire se soumet à "self".

Vous ne voulez évidemment pas que ce "comportement normal" se produise ... Depuis que vous avez défini certaines fonctions ajax pour le remplacer.

Vous devez donc "l'empêcher" en utilisant preventDefault().

Ajouter ce <script></script> dans les tags:

document.querySelector("form").addEventListener("submit", function(event){ 
    event.preventDefault(); 
}