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>