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

Posted 2023-03-05

【中文标题】如何使用 ajax Post 方法在没有 jQuery 的情况下提交用户输入

【英文标题】：How to use ajax Post method to submit user input without jQuery

【发布时间】：2018-11-05 12:59:54

【问题描述】：

我正在尝试制作一个使用 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;

当我点击订阅按钮时，它给了我空值而不是显示错误消息。

【问题讨论】：

从哪里得到空值

你使用“GET”方式发送，但用“POST”方式接收prntscr.com/jmtepp

【参考方案1】：

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

应该是

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

如果 PHP 代码需要一个 POST 请求。

【参考方案2】：

建议你用Axios发送ajax比jquery和纯javascript更清晰和容易