Question

我有一个html表单，用ajax发布到process.php，这个php文件将数据插入mysql。

但由于某种原因，mysql表中的数据会被插入两次。每次提交表单时，都会在数据库中插入两行具有相同值的行。
无法找出找到确切情况的方法。

的index.html

<!DOCTYPE html>
<html>

<head>
  <link data-require="sweet-alert@*" data-semver="0.4.2" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/0.4.2/sweet-alert.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="sweet-alert@*" data-semver="0.4.2" src="//cdnjs.cloudflare.com/ajax/libs/sweetalert/0.4.2/sweet-alert.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <form class="form-horizontal" name="addSaleForm" id="addSaleForm" method="POST">
    <label>First Name:</label><br>
    <input type="text" name="fname" id="fname"><br>
    <label>Last Name:</label><br>
    <input type="text" name="lname" id="lname"><br>
    <button type="submit" id="submit-btn" name="register">Submit</button>
  </form>

  <!-- Display result/error msg from php file -->
  <div id="status"></div>

</body>

</html>


<script>
  $(document).ready(function(e) {
    $("#addSaleForm").on('submit', (function(e) {
      e.preventDefault();
      HoldOn.open({
        theme: "sk-rect",
        message: "Processing...<br>Please Hold On.",
        backgroundColor: "black",
        textColor: "white"
      });
      $.ajax({
        url: "process.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
          if (data === 'Success') {
            HoldOn.close();
            swal("Processed!!!", "Day End Report is processed successfully", "success");
            setTimeout(function() {
              window.location.href = "http://localhost/numbers/sales.php";
            }, 1200);

            //swal("Processed!!!", "Day End Report is processed successfully", "success");    


          } else {
            document.getElementById("status").className += " alert-danger";
            $("#status").html(data);
            HoldOn.close();
            swal("Error!!!", data, "error");
          }
        },
        error: function() {}
      });
    }));
  });
</script>

process.php

<?php
require 'connect-to-mysql.php';

// Set variables...
$error = "";


if ( isset($_POST['fname'] ) {
  $first = $_POST['fname'];
  $last = $_POST['lname'];

    try {
        if ( $error == "") {
            $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $stmt = $dbh->prepare("INSERT into test (Fname, Lname) 
                        VALUES (?, ?)");            

            $values = array($first, $lname);

            if ($stmt->execute($values)) {
                echo "Success";
            }
        }
        else {
            echo $error;
        }
    }
    catch (PDOException $e){
        echo $e->getMessage();
    }
}

?>

编辑：

以下是我复制到Planker的完整和最终代码 http://plnkr.co/edit/JyTox50e0d9Lq1AKAn7g?p=preview

Answer 1

1。）我测试了你的代码（没有注释script.js和HoldOn函数），它运行得很好。所以请检查script.js

2。）你在process.php中有两个错误：

第8行：

if ( isset($_POST['fname'] ) {

在)

之后，你错过了$_POST['fname']

第18行：

$values = array($first, $lname);

可能应该是：

$values = array($first, $last);

AJAX似乎发布了两次

1 个答案: