表单提交了两次(ajax和jquery）

Form submited two times (ajax with jquery)

本文关键字：jquery ajax 两次 表单提交      更新时间：2024-03-30

我有一个简单的表单：当我在没有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 ;
        }
}

我很少寻求帮助，但这次我真的很困，提前感谢

您正在调用：$('.messages')-我打赌您有两个类为messages的元素。然后它们都会发布到您的服务器上。

一个可能的原因可能是您使用按钮或提交来发布ajax请求。试试这个，

$('#addCtg').submit(function (e) {
    e.preventDefault();
    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;
});
相关文章：