堆栈内存溢出
  繁体   English   中英

使用 Ajax 提交表单两次

[英]Submitting form twice using Ajax

 原文  2020-12-01 04:37:05  0   2    javascript/ php/ ajax/ rating-system

问题描述

我正在尝试使用 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 文件）：执行。php 文件使用 Z81C10080DAD53ABF5772 将数据插入数据库

<?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);        
}

?>

2 个解决方案

解决方案1
 2  2020-12-01 05:04:40

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

解决方案2
 1 已采纳  2020-12-01 05:23:04

你可以试试下面的代码

<!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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Ajax表单提交两次？ Ajax表单提交两次 kickoutJS-ajax表单提交两次 使用Yii 2提交两次Ajax表单 使用$ .ajax提交表单 表单通过ajax POST提交两次 角度表单提交两次（ajax获取请求） 防止AJAX表单提交两次？ 表格不提交，除非提交两次。 Ajax，香草js，django 使用 jquery AJAX 提交表单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM