php - Ajax 实时插入双提交故障

Question

此代码是一个储蓄系统。但提款还没有完成，因为我发现我的代码有问题。这段代码工作正常。它可以正确验证并正确存款。当我不小心按两次回车键后，我发现了这个故障。我注意到在清除收银员的密码之前我在数据库中插入了两条记录。我想要的是收银员按两次回车键，只是在交易表中插入一条记录。

这是我的 SavingsAddInsert.php

    <?php
include("general.php");

    if(isset($_POST['Submit'])){
        $Amount = $_POST['Amount'];
        $Password = $_POST['Password'];
        $Transaction = $_POST['Transaction'];
        $SaverAccount = $_POST['AccountID'];


        if(empty($Amount) && empty($Password) && $Transaction == "undefined"){
            $error[] = "Please Select Transaction Type and put an Amount and Password!";
        }else{
            if(empty($Amount) === true || $Amount === null){
                $error[] = "Amount is empty";
            }else{
                if(!preg_match('/^[0-9.]*$/',$Amount)){
                    $error[] = "i only accept numeric and decimal";
                }
            }
            if(empty($Password) === true || $Password === null){
                $error[] = "Password is empty";
            }else{
                $Cashier_Password = Cashier_password($_SESSION['AccountID'],$Password);
                if($Cashier_Password === false){
                    $error[] = "Cashier Password is wrong";
                }
            }

            if($Transaction == "undefined"){
                $error[] = "Please select Category in Transaction Type ";
            }else{
                if($Transaction == "WITHDRAW"){
                    if($Amount > Check_Balance($SaverAccount)){
                        $error[] = "Insufficient Balance!";
                    }
                }
            }
        }

        if(isset($error)){
            echo output_errors($error);
        }


        if(empty($error) || $error = 0){
            if($Transaction == "DEPOSITE"){//deposite
                $Balance = Check_Balance($SaverAccount);
                $TotalAmount = $Balance + $Amount;
                $Cashier = $_SESSION['AccountID'];
                $SavingsID = Get_SavingsID($SaverAccount);

                $update_savings = mysql_query("UPDATE tblsavings SET TotalSavings = '$TotalAmount' WHERE AccountID = '$SaverAccount'");

                if($update_savings){

                    $insert_transaction = mysql_query("INSERT INTO tbltransaction 
                                                                    (SavingsID,Cashier,ReceiveWithdraw,RunningBalance,TransactionType,Date,Time) VALUES
                                                                    ('$SavingsID','$Cashier','$Amount','$TotalAmount','$Transaction',now(),now())") or die(mysql_error());

                        if($insert_transaction){
                            echo "<p><i class='fa fa-check' aria-hidden='true'></i>Transaction Complete. The Total Amount of AccountNo:'".get_AccountNo($SaverAccount)."' is ".$TotalAmount."</p>";

                        }
                }
            }
            else if($Transaction == "WITHDRAW"){//withdraw
                unset($Password);
            }
        }
    }
    ?>

这是我的 SavingsAdd.php

<div class="popup-wrapper">
        <div class="popup-body">
            <div class="popup-head">
                <p>Withdraw and Deposite</p>
            </div>
            <?php 
                if(isset($_GET['Account'])){
                    $Account = $_GET['Account'];
                    $get_info1 = mysql_query("SELECT tbluserdetail.FirstName,
                                                        tbluserdetail.MiddleName,
                                                        tbluserdetail.LastName,
                                                        tbluserdetail.Image,
                                                        tbluserdetail.ImageName,
                                                        tbluserdetail.Gender,
                                                        useraccounts.AccountNo,
                                                        useraccounts.AccountID,
                                                        useraccounts.Position
                                                        FROM useraccounts 
                                                        INNER JOIN tbluserdetail
                                                        ON useraccounts.UserID=tbluserdetail.UserID
                                                        WHERE useraccounts.AccountID = '$Account'");

                while($row1 = mysql_fetch_array($get_info1)){
                    $FirstName_p = $row1['FirstName'];
                    $MiddleName_p = $row1['MiddleName'];
                    $LastName_p = $row1['LastName'];
                    $AccountNo_p = $row1['AccountNo'];
                    $AccountID_p = $row1['AccountID'];
                    $Gender_p = $row1['Gender'];
                    $Image_p = $row1['Image'];
            ?>
            <div class="container-fluid">
                <div class="row">
                    <div class="p-header col-md-2 col-sm-2 col-xs-2">
                        <?php
                            if(empty($Image_p)){
                                if($Gender_p == "Male"){
                                    echo '<img src="img/default-male.jpg"/>';
                                }else if($Gender_p == "Female"){
                                    echo '<img src="img/default-female.jpg"/>';
                                }               
                            }else{
                                    echo '<img src="data:image/jpeg;base64,'.base64_encode( $Image_p ).'"/>';
                            }

                        ?>
                    </div>
                    <div class="p-info col-md-9 col-sm-9 col-xs-9">
                        <div class="row">
                            <p><?php if(isset($_GET['Account'])){ echo $FirstName_p." ".$MiddleName_p." ".$LastName_p;} ?></p>
                        </div>
                        <div class="row">
                            <p>Account No: <?php if(isset($_GET['Account'])){ echo $AccountNo_p;} ?></p>
                        </div>
                    </div>
                </div>
                <hr/>
                <div id="ajaxResult">
                </div>
                <hr/>
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-5">
                        <p>Transaction Type:</p>
                    </div>
                    <div class="col-md-7 col-sm-7 col-xs-7">
                        <select class="form-control" name="Transaction">
                            <option value="undefined">Select</option>
                            <option value="WITHDRAW">Withdraw</option>
                            <option value="DEPOSITE">Deposite</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-5">
                        <p>Amount:</p>
                    </div>
                    <div class="col-md-7 col-sm-7 col-xs-7">
                        <input type="text" class="form-control" name="Amount" id="Amount" placeholder="0.00"/>
                        <input type="hidden" class="form-control" name="AccountID" id="AccountID" value="<?php if(isset($_GET['Account'])){ echo $AccountID_p;} ?>" readonly>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-5">
                        <p>Cashier password:</p>
                    </div>
                    <div class="col-md-7 col-sm-7 col-xs-7">
                        <input type="password" class="form-control" name="Password" id="Password" placeholder="••••••••••"/>
                    </div>
                </div>
                <div class="row">
                    <div class="float-right col-md-12">
                        <input type="button" value="Cancel" name="Cancel" class="btn btn-danger"/>
                        <input type="submit" value="Submit" name="Submit" id="Submit" class="btn btn-success"/>
                    </div>
                </div>
            </div>
            <?php }}?>
        </div>
   </div>

这是我在 SavingsAdd.php 中的 javascript

var form = document.forms.namedItem("myForm");
    form.addEventListener('submit', function(ev) {

      var oOutput = document.getElementById("ajaxResult"),
          fn = new FormData(form);


      fn.append("Submit", fn.get('Submit'));
      fn.append("Amount", fn.get('Amount'));
      fn.append("AccountID", fn.get('AccountID'));
      fn.append("Password", fn.get('Password'));
      fn.append("Transaction", fn.get('Transaction'));

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'SavingAddInsert.php', true);

      xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                if(form){
                    document.getElementById('Amount').value = null;
                    document.getElementById('Password').value = null;
                    var return_data = xhr.responseText;
                    document.getElementById("ajaxResult").innerHTML = return_data;
                }



            }
        }
      xhr.send(fn);
      ev.preventDefault();
    }, false);

正如您在图片中看到的那样。我尝试按双输入键提交。并且该记录插入了两次。

Answer 1

只有在收到服务器的响应后才能重置密码输入字段。您需要在发送请求后立即执行此操作。

如果您想在请求失败时保留数据(包括密码)，则需要添加一个变量来说明请求是否处于事件状态(并正在等待)。将其设置为 1 或“事件”，而不是清空密码字段并在请求成功后重置。只要请求处于事件状态，您的 JS 就不能发送另一个请求。