PHPウェブサイトのAjax変更ボタン

Question

私のPHPページ上の私のボタンのリフレッシュ状態なしで変更しようとしています。
JavaScriptコードで新しく、私の問題に対する解決策はAJAXリクエストを使用しています。

だから私はこのでした：

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>"; 
} 

そして、この（関数の1）、二つの異なるPHPのページに：

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(); 

をしかし、私のボタンは、多くの場合、うまく動作しません。ステータスが変わることはありませんが、データベースや他のPHPコードが正常に動作しています。

Answer 1

formにonsubmitインラインハンドラを定義しました...正しいです。

しかし、フォームサブミットの「通常の動作」は、action属性で提供されるリソースに送信することです。行方不明の場合、フォームは「自己」に送信されます。

あなたは明らかに、この「通常の動作」が起きないようにしたいと思います...あなたはそれを置き換えるためにいくつかのajax関数を定義して以来です。

preventDefault()を使用すると、「防止​​」する必要があります。あなたはAJAXを経由してボタンをロードしている

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