使用AJAX发送数据并使用PHP检索

Question

我有以下ajax代码：

optionScope.data().stage = 'b';
    $.ajax({
        url: "functions/contact.php",
        type: "post",
        data: {'stage': optionScope.data().stage},
        success: function(data, status) {
          console.log("data sent successfully");
          console.log(data);
          console.log(status);

      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }
    }); // end ajax call

如何检索数据

<?php

      $stage = $_POST['stage'];
      echo $stage;

?>

问题是我没有看到它被回应。您可能已经注意到我已经放置了一些日志来跟踪。 它确实通过了成功，但对于console.log(data)，它只打印data而不是实际的＆＃39;阶段＆＃39;数据

任何帮助都将不胜感激。

提前致谢。

php代码包含在主html页面中：

<?php include('functions/contact.php'); ?>

php代码如下：

<?php


  // Honey pot trap
  // Create a hidden input that is only visible to bots. If it's empty than proceed.
  if (empty($_POST['humancheck'])){
    // Proceeed if submit button have been pressed

      $fullName = $_POST['fname'];
      $email = $_POST['email'];

      $stage = $_POST['stage'];
      // Responses provided
      echo "<script>alert($stage); </script>";
      // Sanitize input data
[...]

?>

JS文件包含在主页面中，一旦用户点击提交按钮就会运行php代码。

<form method="post" action="">
          <!-- Setting up the honey pot trap by including a hidden input only accessable by bots -->
          <input type="hidden" name="humancheck" placeholder="enter your title">
          <div class="input_container">

          <span class="input_icon"><i class="fa fa-user"></i></span><input class="inputContact" name="fname" type="text" placeholder="Your Name" required>
        </div>
          <br>

          <div class="input_container">
            <span class="input_icon">
              <i class="fa fa-envelope-o"></i>
            </span>
            <input class="inputContact" name="email" type="email" placeholder="Email" required>
          </div><br><br>

          <button type="button" class="previousfinal"><i class="fa fa-arrow-left"></i>&nbsp; Previous</button>
          &nbsp;
          <button class="final" name="mailSubmit" type="submit"><i class="fa fa-gift"></i>&nbsp; Get My Pack</button>
        </form>

Answer 1

我试图找出optionScope可能是什么样子 这就是我想出的：

var optionScope= new function() {
    return {
        data: function () {
            return {stage:'defaultValue'}
        }
    }
}

您似乎无法按照您尝试的方式分配函数返回的对象的属性：

optionScope.data().stage = 'b';

console.log(optionScope.data().stage); // defaultValue

<强> Demo Fiddle

修改

好的，我想我明白你现在在哪里出错了。

试试这个：

$(function () {                         // wait until dom is ready
    $('form').submit(function (e) {
        e.preventDefault();             // prevent form from submitting
        var data = $(this).serialize(); // get the form data
        data += '&stage=b';             // add stage to the data
        console.log(data)
        $.ajax({
            url: "functions/contact.php",
            type: "post",
            data: data,
            success: function (data, status) {
                console.log("data sent successfully");
                console.log(data);
                console.log(status);

            },
            error: function (xhr, desc, err) {
                console.log(xhr);
                console.log("Details: " + desc + "\nError:" + err);
            }
        });
    });
});