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>