js経由でphpにテキストボックスを送信し、値を処理して新しい値をHTMLページに戻す

Question

私はPHPで処理しようとしていますが、ユーザーからのHTML入力は、onkeyupのイベントPHPを使用して値を取得し、htmlに戻してください。 問題は、フォームを提出することなくそれを行う方法を見つけることができないということです。 ありがとうございました！

私のHTML：

<input id="userin" type="text" name="myinput" onkeyup="valfunction()"<br> 
<p id="myresult">value after php processing.</p> 

私のJS：

function valfunction() { 
    var xhttp = new XMLHttpRequest(); 

     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("myresult").innerHTML = 
       this.responseText; 
      } 
     }; 
    xhttp.open("GET", "newval.php", true); 
    xhttp.send(); 
} 

マイPHP：

<?php 
    $text=$_POST['mytext']; 
     if ($text=='a') $a=1; 
     else if ($text=='b') $a=2; 
     else if ($text=='c') $a=3; 
echo $a; 
?> 

Answer 1

まず、あなたがGETリクエストを送信するが、PHPでいますあなたはPOST値を待っています。 PHPでは、$ _POSTに直接アクセスするのではなく、filter_inputメソッドを使うべきです。 その後、これがGETのために働く必要があります。

xhttp.open("GET", "newval.php?" + document.querySelector('#userin').value , true); 

も

Answer 2

あなたはPHP側からPOSTされた値を処理している場合は、POSTリクエストを送信しなければならない文字をエスケープするように注意してください。

）POSTリクエスト

//Send the proper header information along with the request 
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 

とxhttp.postを（送信するためにこのコードを追加する必要があります

このような

xhttp.open("POST", "https://example.com/?foo=bar&tar=1", true); 
xhttp.send(params)