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返回页面并且不需要任何此（但那是因为我只是按原样返回页面/ doc而不是尝试从动态提交的数据构造变量值）

再次感谢@ASK让我直截了当。

Answer 1

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

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

据我所知，你不具备身份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＆lt; 10：

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

这里是good example。

您可以随时使用某些功能。 <{1}}非常方便的时候。

调用processForm.php的AJAX（NO jQuery）不会使用responseText返回$ _POST ['email']吗？

回答

原始问题：

如何解决：

1 个答案: