AJAX(没有jQuery)调用processForm。php不返回$_POST['email']与responseText?

Answered

OK so I have it working now. Thanks to @ASK for the assist. There was just a few changes that needed to be made. A helpful resource for anyone else struggling with this was Using FormData Objects - MDN

好了，现在可以开始了。感谢@ASK的帮助。我们只需要做一些改变。使用FormData对象MDN对任何其他陷入困境的人来说都是一个有用的资源

My first mistake came from a misunderstanding of what e.preventDefault() was doing. I thought it just stopped the page from redirecting to processForm.php. In fact it does, but also stops the form from submitting to processForm.php too. So when I was making my ajax call to processForm.php the reason my $email variable wasn't returning the submitted email was because there had been no submitted email yet. And when I turned of e.preventDefault() it worked for the opposite reason. Quite obvious in hindsight.

我的第一个错误来自于对e.preventDefault()所做事情的误解。我以为它阻止了页面重定向到processForm.php。事实上，它可以，但也阻止表单提交到processForm。php。所以当我调用processForm时。php我的$email变量没有返回提交的邮件是因为还没有提交的邮件。当我转到e.preventDefault()时，结果却正好相反。很明显的事后。

I've posted my working changes at the bottom here. I'm not sure why but I had to leave out xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); to get it working. So I still need to learn more about setRequestHeader to know what's going on there.

我已经在底部贴出了我的工作变更。我不知道为什么，但我必须离开xhr。setRequestHeader(“内容类型”,“应用程序/ x-www-form-urlencoded”);让它工作。所以我仍然需要了解更多关于setRequestHeader的信息，以了解那里发生了什么。

---

Original Question:

So I've got this form that I send to processForm.php when submitted. I haven't got around to it yet but once sent, processForm.php will add the email to a database that will be used to serve a mailing list for a newsletter. Also note processForm.php will be used for another more complex contact form later.

我把这个表格发给了processForm。php时提交。我还没找到它，但一旦发送，processForm。php将把电子邮件添加到数据库中，该数据库将用于为通讯提供邮件列表。还要注意processForm。php稍后将用于另一个更复杂的联系人表单。

What I'm trying to do right now is create the response message for the user.

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

After the user submits the form and the response from processForm.php is received a <div> will slide down from top of screen with the message, as shown in the below php.

用户提交表单和来自processForm的响应之后。php接收到

将带消息从屏幕顶部向下滑动，如下面的php所示。

I'm using JS (NO jQuery) to prevent the page redirect and AJAX to make the call to processForm.php. I get the responseText from processForm.php, but the $email is missing.

我使用JS(没有jQuery)来防止页面重定向和AJAX调用processForm.php。我从processForm获得responseText。php，但是$email丢失了。

In the js if I comment out e.preventDefault();, allowing the page to redirect, $email is included in the echo $response. But with e.preventDefault(); engaged it isn't.

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

I've tried heaps of different variations of the code below, including just echoing $email, placing $email inside the $message variable but nothing works. The email is always excluded from the xhr.responseText.

我尝试过很多不同的代码变体，包括回送$email，将$email放在$message变量中，但是什么都不管用。电子邮件总是被排除在xhr.responseText之外。

Here's 2 screen shots of what's happening:

以下是两张屏幕截图:

1) This image is with e.preventDefault(); called. (i.e. using ajax)

1)此映像使用e.preventDefault();调用。(即使用ajax)

2) And here we see the response when e.preventDefault(); is commented out. (i.e. no ajax and redirected to processForm.php)

2)在这里，我们看到了e.preventDefault()的响应;被注释掉了。(即不使用ajax并重定向到processForm.php)

Since I still receive the echoed $response when making the ajax call I know processForm.php is building its variables and running the if statement. But why isn't $email included in the xhr.responseText?

因为在进行ajax调用时，仍然接收到响应$响应，所以我知道processForm。php正在构建它的变量并运行if语句。但是为什么不在xhr.responseText中包含$email呢?

The other variables, $message and $response are returned so what's going on?

其他的变量，$message和$response被返回，所以发生了什么?

Am I using $email = $_POST['email']; correctly? I think yes as it works with the redirect to processForm.php.

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

Here's the code. I know their are security steps like htmlspecialchars and trim that should be used, but right now I just want to get it up and running.

这里的代码。我知道它们是安全步骤，比如htmlspecialchars和trim，它们应该被使用，但现在我只想让它运行起来。

HTML:

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:

<?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:

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 --//

---

How is was solved:

All I had to do was:

我所要做的就是:

1) create this var form to hold the filled out form.
2) and initiate a new FormData object inside send().
3) you'll note the setRequestHeader is commented out, I don't seem to need it.
3.1) Still working out why...

1)创建这个var表单来保存已填写的表单。2)并在send()中初始化一个新的FormData对象。你会注意到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 --//

And that's it. It all really boiled down to a misunderstanding of e.preventDefault(). And that I had used ajax previously to return a page and didn't need any of this (but that was because I was just returning the page/doc as is and not trying to construct variable values out of dynamic, submitted data)

就是这样。这一切都归结为对e.preventDefault()的误解。之前我用ajax返回一个页面而不需要任何这些(但那是因为我只是返回页面/doc原样，而不是试图从动态的、提交的数据构造变量值)

Thanks to @ASK again for setting me straight.

再次感谢@ASK让我明白了。

1 个解决方案

#1

I'm surprised that your form is submmiting. I think your problem is this:

我很惊讶你的表格被提交了。我认为你的问题是:

You are using form_trigger in the function formTriggerClick in line 1

在第1行中使用form_trigger函数formTriggerClick

And as far as I know you don't have element with id form_trigger instead you have trigger

据我所知，你没有使用id form_trigger的元素，而是有触发器。

You full working solution will be like this:

您的完整工作解决方案将如下:

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

Edit 1

编辑1

Next problem you never send the value to the proccessForm.php. Here is how you do something like that:

下一个问题永远不会将值发送到proccessForm.php。下面是你如何做这样的事情:

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

See this for more details about AJAX http://www.w3schools.com/ajax/default.asp

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

Edit 2

编辑2

And you initialize xhr like this:

你像这样初始化xhr:

var xhr = new XMLHttpRequest();

Edit 3 Heres how you send the data(However works for IE 10 and above):

编辑3以下是你如何发送数据(但是适用于ie10及以上):

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

For IE < 10:

对于IE < 10:

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

Here's a good example.

这是一个很好的例子。

You could always use some functions. And that's when jQuery is very handy.

你可以用一些函数。这就是jQuery非常有用的地方。