如何在不使用jQuery的情况下使用ajax Post方法提交用户输入

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 <Form method =“ post”>

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

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

应该

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

如果PHP代码期望POST请求。

Answer 2

建议您使用Axios发送Ajax比使用Jquery和纯JavaScript更清晰，更轻松