javascript - 表单提交两次(ajax 和 jquery)

Question

我有一个简单的表单:当我提交时没有 javascript/jquery，它工作正常，我的数据库中只有一个插入，一切正常。

我写了一些 jquery 以在输入按钮上方生成 ajax，如果有错误则显示红色消息，如果插入成功则显示绿色。我还展示了一个小型 gif 加载程序。

我不明白为什么当我使用这个 jquery 时，两个加载器同时出现并且在我的数据库中完成了两个插入。

我重申，当我评论 javascript 时，它工作正常，我完全确定我的 php 没问题。

$('#addCtg').submit(function () {
    var action = $(this).attr('action');
    var name = $('#name').val() ; 

    $('.messages').slideUp('800', function() {

        $('#addCtg input[type="submit"]').hide().after('<img src="spin.gif" class="loader">');

        $.post(action, {
            name: name
        }, function (data) {
            $('.messages').html(data);
            $('.messages').slideDown('slow');
            $('.loader').fadeOut();
            $('#addCtg input[type="submit"]').fadeIn();
        });
    });     
    return false;
});

我真的不明白为什么它不起作用，因为我使用'return false'来改变提交按钮的基本行为

基本的 php 以防万一:

<?php

require_once('Category.class.php');

  if (isset($_POST['name'])) {

   $name = $_POST['name'] ; 

   if ($name == "") {
      echo '<div class="error">You have to find a name for your category !</div>' ;
      exit();
   } else {
       Category::addCategory($name) ; 
       echo '<div class="succes">Succes :) !</div>' ;
       exit();
   }
} else {
   echo '<div class="error">An error has occur: name not set !</div>';
   exit();
}

最后是我在 php 中添加数据库的函数，基本的东西

public static function addCategory($name) {

    $request = myPDO::getInstance()->prepare(<<<SQL
            INSERT INTO category (idCtg, name)
            VALUES (NULL, :name)
SQL
            );

        $r = $request->execute(array(':name' => $name));

        if ($r) {
            return true ;
        } else {
            return false ;
        }

}

我很少寻求帮助，但这次我真的卡住了，提前谢谢你

Answer 1

您正在调用:$('.messages') - 我打赌您有 2 个元素属于 messages 类。然后他们都会发布到您的服务器。