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

Sending data using AJAX and retrieve using PHP

本文关键字：PHP 检索 数据 AJAX 使用      更新时间：2023-09-26

我有以下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，而不是实际的'stage'数据。

如有任何帮助，不胜感激。

提前感谢。

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>

我试图弄清楚optionScope可能看起来像什么下面是我想出来的:

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

似乎你不能按照你所尝试的方式为函数返回的对象分配属性:

optionScope.data().stage = 'b';
console.log(optionScope.data().stage); // defaultValue

演示小提琴

编辑

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

试试这个:

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

把你的代码改成

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

你不需要在你的数据键上加引号

相关文章：