Question

我有一个使用ajax提交的表单，但是出于某种原因，如果你更改了值并再次提交它，那么它会插入2个重复的行，再次提交并在下次插入3个重复的行，依此类推...某处它正在存储数字但是对ajax是新的我不是100％确定我应该或不应该添加的内容。这是代码：

$(document).on('submit', '#add-badge-form', function(e)
{
    e.preventDefault();
    var data = $(this).serialize();
    $.ajax({

        type : 'POST',
        url  : 'submit.php',
        data : data,
        success :  function(data)
        {
            $(".add-badge-result").fadeIn(500).show(function()
                {
                    $(".add-badge-result").html(data);
                });
            $('#add-badge-form').trigger("reset");
       }
    });
    return false;
});

编辑：处理表单的PHP：

if（$ _ POST ['form-name'] =='add-badge'）{

      $name = $_POST['name'];
      $description = $_POST['description'];
      $level = $_POST['level'];

      $result = mysqli_query($con,"INSERT INTO Badges (Name,Description,Level) VALUES ('$name','$description','$level')") or die(mysql_error());
      mysqli_close($con);

      if($result)
      {
      echo $name." added successfully.";
      }
      else
      {
      echo "Error adding ".$name.".";
      }

更新：

我现在发现只有在您更改页面（也使用ajax）后才会出现这种情况。因此，如果您插入表单，然后再次插入而不离开页面，它工作正常。如果您插入，然后更改页面，然后返回并再次插入，它会插入一个副本。以下是我更改页面的方式：

$(".button").click(function(){
    $(".nav li ul a").removeClass("current");

    if (this.id == "add-badge") {
        $("#rightContainer").load("add-badge.php");
        $(this).addClass("current");
    } else if (this.id == "edit-badge") {
        $("#rightContainer").load("edit-badges.php");
        $(this).addClass("current");
    } else if (this.id == "award-badge") {
        $("#rightContainer").load("award-badge.php");
        $(this).addClass("current");
    }   
});

Answer 1

我现在已经修好了。由于$(document).on('submit', '#add-badge-form', function(e)在加载页面时，它每次都加载表单的实例，因此如果我加载页面5次，则它有5个表单实例。我将其更改为$( "#add-badge-form" ).submit(function(e)，现在它只提交一个版本，无论页面加载了多少次。简单的解决方案！

Answer 2

我建议您只从表单中获取所需的字段：

var data = { field1 : $("#field1").val(), ... };

这样可以防止有人手动向表单添加字段。

我认为你序列化数据的方式是问题所以它应该修复它。

Ajax表单提交递增时间

2 个答案: