使用 Ajax 提交表单两次

Question

我正在尝试使用 Ajax 提交表单，但它提交了两次输入的值。你能帮我防止这个问题吗？我尝试了前面问题的几个建议，但没有用。

谢谢

Html代码：

<form id="ratingForm" method="POST">
    <div class="form-group">
        <h4>Rate this product</h4>
        <!-- Start Star -->
        <button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        
        <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        </button>
        <!-- End Star -->

        <input type="hidden"  id="rating" name="rating" value="1">
        <input type="hidden"  id="itemId" name="itemId" value="<?php echo $_GET['id']; ?>">
        <input type="hidden" name="action" value="saveRating">
    </div>      
    <div class="form-group">
        <!--Comment Start-->
        <label for="usr">Title*</label>
        <input type="text"  id="title" name="title" required>
    </div>
    <div class="form-group">
        <label for="comment">Comment*</label>
        <textarea rows="5" id="comment" name="comment" required></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-info" id="saveReview">Save Review</button>
    </div>
     <!--Comment End-->          
</form>

JS代码：

$('#ratingForm').on('submit', function(event){
  event.preventDefault();
  event.stopImmediatePropagation();
    var formData = $(this).serialize();
    $.ajax({
        type : 'POST',
        dataType: "json",   
        url : 'action.php',                 
        data : formData,
        success:function(response){
            if(response.success == 1) {
                $("#ratingForm")[0].reset();
                window.location.reload();
            }
        }
    }); 
});

Php 代码（这是 action.php 文件）： Execution.php 文件使用 mysql.

将数据插入数据库

<?php
session_start();
include 'class/Execution.php';
$rating = new Rating();

if(!empty($_POST['action']) && $_POST['action'] == 'saveRating'  
    && !empty($_POST['rating']) 
    && !empty($_POST['itemId'])) {
        $rating->saveRating($_POST, $_SESSION['userId']);   
        $data = array(
            "success"   => 1,   
        );
        echo json_encode($data);        
}

?>

Answer 1

使用 POST 方法，您的表单可能会在使用 window.location.reload(); 重新加载时第二次提交，当 ajax 使用 [=] 成功调用时，您可以简单地 redirect 页面12=] 或 window.location.replace("http://yourwebpage.php");

Answer 2

你能试试下面的代码吗

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js Check</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
</head>

<body>
<div id="wrapper">
  <form id="ratingForm" method="POST">
    <div class="form-group">
      <h4>Rate this product</h4>
      <!-- Start Star -->
      <button type="button" class="btn btn-warning btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
      <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
      <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
      <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
      <button type="button" class="btn btn-default btn-grey btn-sm rateButton" aria-label="Left Align"> <span class="glyphicon glyphicon-star" aria-hidden="true"></span> </button>
      <!-- End Star -->
      
      <input type="hidden"  id="rating" name="rating" value="1">
      <input type="hidden"  id="itemId" name="itemId" value="<?php echo $_GET['id']; ?>">
      <input type="hidden" name="action" value="saveRating">
    </div>
    <div class="form-group"> 
      <!--Comment Start-->
      <label for="usr">Title*</label>
      <input type="text"  id="title" name="title" required>
    </div>
    <div class="form-group">
      <label for="comment">Comment*</label>
      <textarea rows="5" id="comment" name="comment" required></textarea>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-info" id="saveReview">Save Review</button>
    </div>
    <!--Comment End-->
  </form>
</div>
<script>
jQuery(document).ready(function($) {
        
        $('#ratingForm').on('submit', function(event){
          event.preventDefault();
          event.stopImmediatePropagation();
            var formData = $(this).serialize();
            $.ajax({
                type : 'POST',
                dataType: "json",   
                url : 'action.php',                 
                data : formData,
                success:function(response){
                console.log(response);
                    if(response.success == 1) {
                        $("#ratingForm")[0].reset();
                        window.location.reload();
                    } 
                }
            }); 
        });
});
</script>
</body>
</html>

使用 Ajax 提交表单两次

Submitting form twice using Ajax

javascript

php

ajax

rating-system