Как использовать ajax Post метод для отправки пользовательского ввода без jQuery

Question

Я пытаюсь создать форму подписчика, которая отправляет форму с использованием метода ajax post , а не jQuery .Я написал код, но он не работает должным образом, я думаю, что я делаю неправильно при отправке данных POST.вот мой код, что я пробовал до сих пор.

    <div id="form" style="max-width:477px">

    <div class="imgContainer" id="myImageContainer">
<span onclick="document.getElementById('myLogin').style.display='none'" class="close" title="Close">&times;</span>

        </div>
        <div class="loginInfo" id="myLoginInfo">

          <label for="Full Name">
<b>Full Name</b>
</label>
<spam class="error" style="color:red">
<i id="nameErr"></i>
</spam>
          <input type="text" placeholder="Enter full name" name="name" id="name">

          <label for="Email"><b>Email</b></label>
<spam class="error" style="color:red">
<i id="emailErr"> </i>
</spam>

<input type="text" placeholder="Enter your Email" name="email" id="email">

          <button onclick="verify()">Subscribe</button>

        </div>


      </div>
    </div>


    <script>
    function verify(){
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myObj = JSON.parse(this.responseText);
            document.getElementById("email").innerHTML = myObj.email;
            document.getElementById("emailErr").innerHTML = myObj.emailErr;
            document.getElementById("name").innerHTML = myObj.name;
            document.getElementById("nameErr").innerHTML = myObj.nameErr;

        }
    };
    xmlhttp.open("GET", "subs.php", true);
    var data="email=" + document.getElementById("email").value + "&name="+document.getElementById("name").value;

    xmlhttp.send(data);
    }
    </script>

и страница PHP выглядит следующим образом (работает нормально при использовании HTML

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$email = $name =  $emailErr = $nameErr="";

function test($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}


  if (empty($_POST["email"])) {
      $emailErr=" *This Field is Required";
  }else{
    $email=test($_POST["email"]);
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)){$emailErr = " *Invalid email format";}

 if (strlen($email)>60){$emailErr=" *Email cannot be larger than 60 character";}

  }

 if (empty($_POST["name"])) {
      $nameErr=" *This Field is Required";
  }else{
      $name = test($_POST["name"]);
      $name = preg_replace('/\s\s+/', ' ', $name);

if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
  $nameErr = " *Only letters and white space allowed"; 
}
      if (strlen($name)>60)

  {$nameErr=" *Name cannot be larger than 60 character";}
 }
$json['email'] = $email;
$json['emailErr'] = $emailErr;
$json['name'] = $name;
$json['nameErr'] = $nameErr;
$myJSON = json_encode($json);

echo $myJSON;
}

, когда я нажимаю кнопку подписки, она дает мне нулевое значение, а не показывает сообщение об ошибке.

Answer 1

Предлагаем вам отправить ajax с Axios более наглядно и просто, чем Jquery и чистый javascript

Answer 2

 xmlhttp.open("GET", "subs.php", true);

Должно быть

 xmlhttp.open("POST", "subs.php", true);

Если код PHP ожидает POST-запрос.