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

Question

I have the following ajax code:

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

How the data is being retrieved

<?php

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

?>

Problem is i do not see it being echo out. You may have notice that i've place a few log to keep track. Well it does pass success, but for console.log(data) , it just prints data and not the actual 'stage' data.

Any help would be appreciated.

Thanks in advance.

The php code is included in the main html page as such:

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

the php code is as follow:

<?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
[...]

?>

The JS file is included in the main page, and the php code is run once a user has hit on the submit button.

<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

I was trying to figure out what optionScope might look like and here is what I came up with:

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

It doesn't seem that you can assign a property of an object returned by a function in the way you are trying:

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

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

Demo Fiddle

Edit

Ok, I think I understand where you're going wrong now.

Try this:

$(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);
            }
        });
    });
});

Answer 2

change your code to this

optionScope.data().stage = 'b';
$.ajax({
    url: "functions/contact.php",
    type: "post",
    data: {stage: optionScope.data().stage}, // don't put quotes around 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

you don't need to put quotes around the key for your data