javascript - AJAX(无jQuery)对processForm.php的调用不会返回带有responseText的$ _POST ['email']吗？

Question

已回答

好的，现在我可以工作了。感谢@ASK的协助。只需进行一些更改。对于其他为此感到困扰的人，一个有用的资源是Using FormData Objects - MDN

我的第一个错误来自对e.preventDefault()所做的误解。我以为它只是阻止了页面从重定向到processForm.php。实际上确实如此，但是也阻止了表单提交到processForm.php。因此，当我对processForm.php进行ajax调用时，我的$email变量未返回提交的电子邮件的原因是因为还没有提交的电子邮件。当我转向e.preventDefault()时，它的工作原因却相反。事后看来很明显。

我已将我的工作更改发布在此处的底部。我不确定为什么，但是我不得不省略xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");使其正常工作。因此，我仍然需要了解有关setRequestHeader的更多信息，以了解发生了什么。



原始问题：

因此，我收到了提交时发送给processForm.php的这张表格。我还没有解决，但是一旦发送，processForm.php会将电子邮件添加到数据库中，该数据库将用于为新闻通讯提供邮件列表。另请注意，processForm.php稍后将用于另一个更复杂的联系表。

我现在想做的是为用户创建响应消息。

用户提交表单并收到来自processForm.php的响应后，<div>将从屏幕顶部向下滑动并显示消息，如以下php所示。

我正在使用JS（NO jQuery）来防止页面重定向，而AJAX会导致对processForm.php的调用。我从processForm.php获取了responseText，但是$email丢失了。

在js中，如果我注释掉e.preventDefault();，允许页面重定向，则$email包含在echo $response中。但是e.preventDefault();不会。

我尝试了下面代码的各种不同形式的堆，包括仅回显$email，将$email放在$message变量内，但没有任何效果。电子邮件始终从xhr.responseText中排除。

这是正在发生的事情的2个屏幕截图：

1）该图像被称为e.preventDefault();。 （即使用ajax）



2）在这里，我们看到注释e.preventDefault();时的响应。 （即没有ajax并重定向到processForm.php）



由于在进行ajax调用时仍收到回显的$response，因此我知道processForm.php正在构建其变量并运行if语句。但是为什么$email不包含在xhr.responseText中？

返回其他变量$message和$response，这是怎么回事？

我是否正确使用$email = $_POST['email'];？我认为是的，因为它可用于重定向到processForm.php.


这是代码。
我知道应该使用诸如htmlspecialchars和trim之类的安全步骤，但是现在我只想启动并运行它。

HTML：

<form id="mailing_list_form" action="processForm.php" method="post" accept-charset="UTF-8">
  <div id="their_email" class="their_email form_field">
    <label for="email">Email</label>
    <input id="email" type="email" name="email" required>
  </div>
  <div class="state_container form_field">
    <label for="state">State</label>
    <select name="state">
      <option value="" disabled selected></option>
      <option value="NSW">NSW</option>
      <option value="Queensland">Queensland</option>
      <option value="SA">SA</option>
      <option value="Tasmaina">Tasmaina</option>
      <option value="Victoria">Victoria</option>
      <option value="WA">WA</option>
    </select>
  </div>
  <button id="form_trigger" type="submit" name="mList">Subscribe</button>
</form>

PHP：

<?php 

  $mailingListForm = $_POST['mList'];

  $email = $_POST['email'];
  $state = $_POST['state'];

  if(isset($mailingListForm)){
     $message = "has been added to the mailing list.";
     $response = '<h2 class="form_submitted_status">Succes!<i class="form_submitted_details">'.$email." ".$message.'</i></h2>';
     echo $response;
  }
?>

JS：

formTriggerClick();
function formTriggerClick(){
    var formTrigger = document.getElementById("form_trigger");

    formTrigger.addEventListener("click", function(event){
    event.preventDefault();

    if(formTrigger.hasAttribute("data-validation")){
        processForm();

        function processForm(){
            getResponse(function(result){
                var resultText = result;
                var response = document.getElementsByClassName("form_submitted")[0];
                response.innerHTML = resultText;
                response.setAttribute("data-show", "response");
            });

        }// processForm() -- END --//

        function getResponse(callback){
            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if (xhr.readyState === 4) {
                    if(xhr.status === 200) {
                        callback(xhr.responseText);
                    }
                }
            };
            xhr.open("POST", "processForm.php");
            xhr.send();
        }//getResponse() -- END --//

    }// if formTrigger has data-validation -- END --//
    });

}//formTriggerClick() // -- END --//

解决方法：

我要做的就是：

1）创建此 var form来保存填写的表单。
2）并在 send()中启动一个新的FormData对象。
3）您会注意到 setRequestHeader已被注释掉，我似乎不需要它。
3.1）仍在找出原因...

function getResponse(callback){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4) {
            if(xhr.status === 200) {
                callback(xhr.responseText);
            }
        }
    };
    var form = document.getElementById("mailing_list_form");
    xhr.open("POST", "processForm.php");
    //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(new FormData(form));
}//getResponse() -- END --//

就是这样。真正归结为对 e.preventDefault()的误解。而且我以前使用过ajax来返回页面并且不需要任何页面（但这是因为我只是按原样返回页面/文档，而不是试图从动态的已提交数据中构造变量值）

再次感谢@ASK让我挺直。

Answer 1

我很惊讶您的表格正在提交。
我认为您的问题是这样的：


  您正在第1行的函数form_trigger中使用formTriggerClick


据我所知，您没有ID为form_trigger的元素，而是trigger

您完整的工作解决方案将是这样的：

formTriggerClick();
function formTriggerClick(){
    var formTrigger = document.getElementById("trigger");
    ...

编辑1

下一个问题是您永远不会将值发送到 proccessForm.php。
您可以按照以下方式进行操作：

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("field1Name=value1&field2Name=value2&...");

有关AJAX http://www.w3schools.com/ajax/default.asp的更多详细信息，请参见此

编辑2

然后像这样初始化 xhr：

var xhr = new XMLHttpRequest();

编辑3
以下是您发送数据的方式（但是适用于IE 10及更高版本）：

var form = document.getElementById("formId");
var data = new FormData(form);
xrh.send(data);

对于IE <10：

var emailValue= document.getElementById("emailFieldId").value;
....
var data="email="+emailValue+"...so on";
xhr.send(data);

这是 good example。

您可以随时使用某些功能。那时 jQuery非常方便。