访问Ajax在PHP中发送的POST值

I'm using Ajax to get POST values from a form. However, when I try to insert the form values in a database on submit, it doesn't get inserted. I still have no idea why it does not work.

Here is my HTML

<form method="post" action="" id="home-sign-up-form">
    <input type="text" name="suFirstName" placeholder="First Name" class="text-input-minor" id="sign-up-first-name-text-input">
    <input type="text" name="suLastName" placeholder="Last Name" class="text-input-minor" id="sign-up-last-name-text-input">
    <input type="text" name="suEmail" placeholder="Email" class="text-input-minor" id="sign-up-email-text-input">
    <input type="password" name="suPassword" placeholder="Password" class="text-input-minor" id="sign-up-password-text-input">
    <input type="password" name="suConfirmPassword" placeholder="Confirm Password" class="text-input-minor" id="sign-up-confirm-password-text-input">
    <input type="text" name="suDisplayName" placeholder="Display Name (you can change this later)" class="text-input-minor" id="sign-up-display-name-text-input">
    <br><font class="text-error" id="sign-up-error-text"></font><br>
    <label><input type="checkbox" name="suRememberMe" value="yes" id="sign-up-remember-me-checkbox"><font id="sign-up-remember-me-text">Remember me</font></label>
    <input name="signUp" type="submit" value="Sign Up" id="sign-up-submit">
</form>

My JS (the first console.log does go through and work):

if (validForm)
{
    console.log("valid form");
    console.log(JSON.stringify($('#home-sign-up-form')[0].seriaize()));
    $.ajax(
    {
        type:'POST',
        url:'form-submit.php',
        data:$('#home-sign-up-form')[0].serialize(),
        success:function(response)
        {
            $suForm.hide();
            $tosppText.hide();
            $mailSentIcon.show();
            $emailSentText.show();
            $emailSentTextEmail.text($suEmail);
            $suBox.css("padding-left", "10px");
            $suBox.css("padding-right", "10px");
        }
    });     
}

And my PHP/MySQL:

<?php require 'dbconnect.php'; ?>
if (isset($_POST['suEmail']))
{
    echo "<script type='text/javascript'>alert('got');</script>";
    $suFirstName = mysqli_real_escape_string($_POST['suFirstName']); 
    $suLastName = mysqli_real_escape_string($_POST['suLastName']); 
    $suEmail = mysqli_real_escape_string($_POST['suEmail']); 
    $suPassword = mysqli_real_escape_string($_POST['suPassword']);
    $suDisplayName = mysqli_real_escape_string($_POST['suDisplayName']);
    $code = substr(md5(mt_rand()),0,15);

    $query = $connection->query("INSERT INTO users (firstName,lastName,email,password,displayName,confirmCode,verified)Values('{$suFirstName}','{$suLastName}','{$suEmail}','{$suPassword}','{$suDisplayName}','{$confirmCode},'{$verified}')");
}

The alert in the PHP code so I would assume that it isn't getting the 'signUp' POST variable. Thanks so much! Any help is appreciated! :D

$("#home-sign-up-form").submit(function(event) {
  alert("Handler for .submit() called.");
  event.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'form-submit.php',
    data: $('#home-sign-up-form').serialize(),
    success: function(response) {
      console.log(response);
      var data = JSON.parse(response);
      $suForm.hide();
      $tosppText.hide();
      $mailSentIcon.show();
      $emailSentText.show();
      //$emailSentTextEmail.text($suEmail);
      $emailSentTextEmail.text(data.suEmail);
      $suBox.css("padding-left", "10px");
      $suBox.css("padding-right", "10px");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form method="post" action="" id="home-sign-up-form">
  <input type="text" name="suFirstName" placeholder="First Name" class="text-input-minor" id="sign-up-first-name-text-input">
  <input type="text" name="suLastName" placeholder="Last Name" class="text-input-minor" id="sign-up-last-name-text-input">
  <input type="text" name="suEmail" placeholder="Email" class="text-input-minor" id="sign-up-email-text-input">
  <input type="password" name="suPassword" placeholder="Password" class="text-input-minor" id="sign-up-password-text-input">
  <input type="password" name="suConfirmPassword" placeholder="Confirm Password" class="text-input-minor" id="sign-up-confirm-password-text-input">
  <input type="text" name="suDisplayName" placeholder="Display Name (you can change this later)" class="text-input-minor" id="sign-up-display-name-text-input">
  <br><font class="text-error" id="sign-up-error-text"></font>
  <br>
  <label>
    <input type="checkbox" name="suRememberMe" value="yes" id="sign-up-remember-me-checkbox"><font id="sign-up-remember-me-text">Remember me</font>
  </label>
  <input name="signUp" type="submit" value="Sign Up" id="sign-up-submit">
</form>

<?php
if (isset($_POST['suEmail']))
{
  $con=mysqli_connect("localhost","root","cakpep","backoffice");

  // Check connection
  if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
    $suFirstName = mysqli_real_escape_string($con,$_POST['suFirstName']);
    $suLastName = mysqli_real_escape_string($con,$_POST['suLastName']);
    $suEmail = mysqli_real_escape_string($con,$_POST['suEmail']);
    $suPassword = mysqli_real_escape_string($con,$_POST['suPassword']);
    $suDisplayName = mysqli_real_escape_string($con,$_POST['suDisplayName']);
    $code = substr(md5(mt_rand()),0,15);

    $query = $connection->query("INSERT INTO users (firstName,lastName,email,password,displayName,confirmCode,verified)Values('{$suFirstName}','{$suLastName}','{$suEmail}','{$suPassword}','{$suDisplayName}','{$confirmCode},'{$verified}')");
    echo json_encode($_POST);
}
?>

  • add this to trigger when submit form $("#home-sign-up-form").submit(function(event) {

  • and then on php return the response with json string echo json_encode($_POST);

  • and then in the response ajax parse json text to object like this var data = JSON.parse(response); $emailSentTextEmail.text(data.suEmail);
  • i hope this what you want..
</div>