ajax js-php POST請求不工作，沒有jQuery

Question

我找不到任何深入指導ajax，特別是對於PHP服務器端。 我目前只嘗試將數據發佈到PHP並在嘗試運用SQL轉儲之前對其進行測試。 工作了2天，仍然無法工作。猜猜它的頭股票溢出的好時機： HTML + JS：

<script>//send data scripts 
 
     var formNode = document.querySelector("#customerRegiForm"); 
 
     var formData = new FormData(formNode); 
 
     var request = new XMLHttpRequest(); 
 
     request.open("POST", "php/formSubmission.php", true); 
 
     request.onreadystatechange = function() { 
 
      if(request.readyState == 4 && request.status == 200){ 
 
       document.getElementById("testing").innerHTML = request.responseTexts; 
 
      } 
 
     }; 
 
     request.send(formData); 
 
    </script>

<form class="regiForm" id="customerRegiForm" onsubmit="return formValidation()"> 
 
     <div> 
 
     Name: <input type="text" id="firstName" name="firstname" class="" required /> 
 
     Family Name: <input type="text" id="lastName" name="lastname" class="" required /> 
 
     </div> 
 
     <div> 
 
     Email: <input type="email" class="" id="email" name="email "required /> 
 
     </div> 
 
     <div> 
 
     Phone Number: <input type="text" id="phone" name="phone" class="" required /> 
 
     </div> 
 
     <div> 
 
      Country: <select name="country" class="countries" id="countryId" style="width: 100px"> 
 
       <option value="">Select Country</option> 
 
      </select> 
 
      State: <select name="state" class="states" id="stateId"> 
 
       <option value="">Select State</option> 
 
      </select> 
 
      City: <select name="city" class="cities" id="cityId"> 
 
       <option value="">Select City</option> 
 
      </select> 
 
     </div> 
 
     <div> 
 
     Address: <input type="text" name="address" /><br /> 
 
     </div> 
 
     <button type="submit">Submit</button> 
 
    </form> 
 
    <p id="testing"></p>

<?php 
/** 
* Created by PhpStorm. 
* User: user 
* Date: 17-Sep-16 
* Time: 14:50 
*/ 
echo $_POST['email']; 
?> 

此外，在主題的視頻和書籍的任何建議？

Answer 1

我不知道，如果它只是從你的實際代碼一個錯字，但

request.responseTexts 

應該

request.responseText 

（最後的 「S」 也不行）

Answer 2

您需要更改代碼中的幾件事情，例如：

• 請看下面<input>元素，

  <input type="email" class="" id="email" name="email "required /> 
               ^^^^^^^^^^^^^ 
  

  你能看到email後多餘的空間？這就是爲什麼在PHP方面，echo $_POST['email'];將無法​​正常工作。這<input>元素應該是這樣的：

  <input type="email" class="" id="email" name="email" required /> 
  

• 在這裏看看這個JavaScript語句，

  document.getElementById("testing").innerHTML = request.responseTexts; 
                 ^^^^^^^^^^^^^^^^^^^^^ 
  

  它應該是，

  document.getElementById("testing").innerHTML = request.responseText; 
  

• 看的頂部<form>元素，

  <form class="regiForm" id="customerRegiForm" onsubmit="return formValidation()"> 
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
  

  但我在代碼中看不到formValidation()函數。創建一個名爲formValidation()的函數，並確保從該函數返回false，否則每次點擊提交按鈕時都會提交表單。所以，你的腳本應該是這樣的：

  <script> 
      function formValidation(){ 
       var formNode = document.querySelector("#customerRegiForm"); 
       var formData = new FormData(formNode); 
       var request = new XMLHttpRequest(); 
       request.open("POST", "post.php", true); 
       request.onreadystatechange = function() { 
        if(request.readyState == 4 && request.status == 200){ 
         document.getElementById("testing").innerHTML = request.responseText; 
        } 
       }; 
       request.send(formData); 
       return false; 
      } 
  </script>