使用 Ajax 提交表单两次答案

【问题标题】：Submitting form twice using Ajax使用 Ajax 提交表单两次
【发布时间】：2020-12-01 04:37:05
【问题描述】：

我正在尝试使用 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);        
}

?>

【问题讨论】：

你能给你的html表单和php代码，这样我可以在我的机器上产生同样的错误
我认为你的代码中存在一些 js 错误，否则一切都是完美的。请添加您的html代码也请调试更多...
如果我们看不到您想要实现的目标的完整代码，我们很难为您提供帮助
@Ajith 我已经更新了帖子。
@TMN 你可以试试Akshay给出的答案...还要确保页面没有js错误

标签： javascript php ajax rating-system

【解决方案1】：

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

【讨论】：

我之前也做过，可惜没成功

【解决方案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>

【讨论】：

非常感谢！有用。你能解释一下错误在哪里吗？
@TMN 确保将 ajax 调用脚本添加到您的 jquery 包含下方