運行ajax的問題​​

Question

我一直在嘗試發送一個php請求，而不使用ajax重新加載。但是我不認爲我很瞭解阿賈克斯。我試圖尋找w3school示例代碼，並試圖想出了一個解決方案：

<script> 
function loadDoc() { 
var xhttp = new XMLHttpRequest(); 
xhttp.open("GET", "led.php?state=1", true); 
xhttp.send(); 
</script> 

<button class="button" onclick = "loadDoc()">LED ON</button> 

</br> 
</br> 
<script> 
function loaddoc() { 
var xhttp = new XMLHttpRequest(); 
xhttp.open("GET", "led.php?state=0", true); 
xhttp.send(); 
</script> 

<button class="button" onclick "loaddoc()">LED OFF</button> 

老實說，我不知道我要去的地方錯了。當我點擊一個按鈕時，發送一個PHP請求。但現在這顯然不起作用。

任何人都可以幫忙嗎？

問候

PHP代碼：

<?php 

$onoffdata = $_GET["state"]; 

$textfile = "LED_data.txt"; 
$fileLocation = "$textfile"; 
$fh = fopen($fileLocation, 'w') or die("Error opening file!"); 

$stringToWrite = "$onoffdata"; 
fwrite($fh,$stringToWrite); 

fclose($fh); 

header("Location:index.html"); 
?> 

Answer 1

「我真的不知道我出錯的地方......」=>你實際上只是在那裏工作的一部分。因此，讓我回溯了一下： 打破XMLHttpRequest的生命週期進入步驟，您需要：

1. 實例化XMLHttpRequest對象;這就是你在var xhttp = ...作業中所做的。
2. 添加事件監聽器。這是你基本上告訴它在每個階段應該做什麼（我可能會在這裏說state）向你提出要求。作爲總結，這裏有五個你可以聽的readyStates。查看更多here
3. 啓動請求，這是您對xttp.open(...)的處理
4. 然後發送請求。這就是你對xttp.send()所做的一切，你可能已經猜到了。

所以回到你缺少的步驟。

xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("demo").innerHTML = 
     this.responseText; 
    } 
    }; 

你想你的var http = ...和你xhttp.open之間做到這一點。

這一塊基本上是說：「嘿xttp只要您readyState變化（0〜4），執行該功能。現在的功能本身就是在這種情況下很簡單，但是要注意的條件。 this.readyState == 4被檢查是否請求是done - 當你得到你的全response

和

this.status == 200被檢查，如果一切都很好這是。你可以搜索http status codes各種值status即可。

簡而言之，該檢查旨在確保請求已完成，並且在嘗試執行responseText之前一切順利。在W3Schools example中，他們將DOM中元素的innerHTML設置爲從服務器返回的內容。基本上用xmlhttp請求的結果做一些事情。在你的代碼片段中，你只發送請求而不是監聽響應，更不用說做任何事情了。

希望有所幫助。

Answer 2

在您led.php把代碼<?php $_GET['state'];?>然後打開你的瀏覽器中檢查並轉到網絡選項卡，在右邊你會看到一個預覽選項卡這會在你的情況下返回什麼led.php輸出，1次或0

Answer 3

首先測試的是led.php工作如預期的那樣，轉到led.php？state = 1。這是爲了測試頁面不會死亡。如果頁面不會死然後打開該文件，並檢查，看它是否說1.使用下面的代碼試圖關閉LED，然後檢查文件的內容，希望它應該是0

<script> 
function setState(state) { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.open("GET", "led.php?state="+state, true); 
     xhttp.send(); 
    } 
</script> 

<button type="button" class="button" onclick="setState(1)">LED ON</button> 

</br> 
</br> 

<button type="button" class="button" onclick="setState(0)">LED OFF</button>