Javascript Jquery$.post脚本运行三次（多次插入）

我使用这个脚本在mysql数据库中创建一个数据。 但是当我创建项目时，它会插入项目的3倍

首先我想可能是我经常按下提交按钮。 因此，我添加到表单a.submit函数中。但没有解决多重插入问题

HTML Index.HTML

$（文档）.ready（函数（）{
$（'.customBtn'）.prop（'disabled'，false）；
//查看加载页面时的用户
$（'#loaderImage'）.show（）；
showUsers（）；
//单击“查看用户”按钮
$（'#viewUsers'）。单击（函数（）{
//显示加载程序img
$（'#loaderImage'）.show（）；
showUsers（）；
});
//单击“+新用户”按钮
$（'#addUser'）。单击（函数（）{
showCreateUserForm（）；
});
//单击编辑按钮
$（文档）.on（'click'，'.editBtn'，function（）{
var user_id=$（this）.closest（'td'）.find（'.userId'）.text（）；
console.log（用户id）；
//显示加载程序图像
$（'#loaderImage'）.show（）；
//1秒后读取并显示记录
//我们使用setTimeout只是为了在服务器速度非常快时显示图像加载效果
//否则，您只需执行以下操作：$（'#pageContent'）.load（'update_form.php？user_id=“+user_id+”，function（）{$（'#loaderImage'）.hide（）；}）；
setTimeout（$（'#pageContent'）.load（'cure/update_form.php？user_id=“+user_id+”，function（）{$（'#loaderImage'）.hide（）；）；”，1000）；
}); 
//单击“删除”按钮时
$（文档）.on（'click'，'.deleteBtn'，function（）{
如果（确认（'Möchten Sie dies Projekt löschen？'））{
//拿到身份证
var user_id=$（this）.closest（'td'）.find（'.userId'）.text（）；
//触发删除文件
$.post（“cure/delete.php”，{id:user_id}）
.完成（功能（数据）{
//您可以查看控制台以验证记录是否已删除
控制台日志（数据）；
$（'#loaderImage'）.show（）；
//重新加载列表
showUsers（）；
});
}
});
//创建表单已提交
$（文档）.on（'submit'，'#addUserForm'，function（）{
//显示加载程序img
$（'#loaderImage'）.show（）；
//发布表单中的数据
$.post（“cure/create.php”，$（this.serialize（））
.完成（功能（数据）{
//“data”是返回的文本，您可以根据它执行任何条件
showUsers（）；
});
返回false；
});
//更新表格已提交
$（文档）.on（'submit'，'updateUserForm'，函数（）{
//显示加载程序img
$（'#loaderImage'）.show（）；
//发布表单中的数据
$.post（“cure/update.php”，$（this.serialize（））
.完成（功能（数据）{
//“data”是返回的文本，您可以根据它执行任何条件
showUsers（）；
});
返回false；
});
});
//阅读用户
函数showUsers（）{
var kom_id={{user:：id}；
控制台日志（kom_id）；
//至少一秒钟后读取并显示记录
//我们使用setTimeout只是为了在服务器速度非常快时显示图像加载效果
//否则，您只需执行以下操作：$（'#pageContent'）.load（'read.php'，function（）{$（'#loaderImage'）.hide（）；}）；
//这也隐藏了加载程序图像
setTimeout（$（'#pageContent'）.load（'cure/read.php？kompetenzpartner=“+kom#u id+”，function（）{$（'#loaderImage'）.hide（）；）；”，1000）；
} 
//创建用户表单
函数showCreateUserForm（）{
var kom_id_2={{user:：id}；
控制台日志（kom_id_2）；
//显示加载程序图像
$（'#loaderImage'）.show（）；
//1秒后读取并显示记录
//我们使用setTimeout只是为了在服务器速度非常快时显示图像加载效果
//否则，您只需执行：$（'#pageContent'）.load（'read.php'）；
setTimeout（$（'#pageContent'）.load（'cure/create_form.php？komptenzpartner=“+kom_id_2+”，function（）{$（'#loaderImage'）.hide（）；”，1000）；
}

create.php

*和create_form.php*

<script>
$('form').submit(function(){
    $('.customBtn').prop("disabled", true);
}); 
</script>
<form id='addUserForm' action='#' method='post' border='0'>
    <table>
        <tr>
            echo "<td>Project</td>";
            <td><input type='text' name='project' required></td>
        </tr>
         <tr>
            echo "<td>Name</td>";
            <td><input type='text' name='name' required></td>
        </tr>


        <tr>
            <td colspan="2">        
            <?php if($landcode == "de"): {
            echo "<input type='submit' value='Speichern' class='customBtn'>";
            }
            else: {
            echo "<input type='submit' value='Save' class='customBtn'>"; }
            endif;
            ?>          
            </td>
        </tr>
    </table>
</form>

$（'form'）。提交（函数（）{
$（'.customBtn'）.prop（“已禁用”，true）；
}); 
呼应“工程”；
呼应“姓名”；
由于提交了3个实例，可能
form
提交了3次。1） 如果使用
按钮
单击
事件
提交
表单
；2） 在表单中的帖子“”顶部的
.submit（）
方法，然后；3） 在
$.post（）

未发布
html
则不确定。以上三项中的一项可能完成

编辑

注

对
#viewUsers
，
.editBtn
，
.deleteBtn
，
#updateUserForm
不确定
在
index.html
中不显示为
html
。请澄清这些内容`
有标签吗

还有
setTimeout
可以替换为
.show（1000，函数（）{/*callback*/}）
在
showUsers（）
和
showCreateUsersForm

下面可能仍存在一些冗余。也许可以尝试替换
单击

对于映射到
的
作为
事件提交
，请单击
按钮
或
输入类型按钮
元素

如果可能，发布
index.html
中的所有
html

不确定文档中或`php文件中的
php

试一试


$（文档）.ready（函数（）{
$（'.customBtn'）.prop（'disabled'，false）；
//查看加载页面时的用户
$（'#loaderImage'）。显示（0，函数（）{
showUsers（）；
});
/
<?php

//include database connection
include 'libs/db_connect.php';

try{

    //write query
    $query = "INSERT INTO table SET project = ?, name = ?, tstamp = UNIX_TIMESTAMP()";

    //prepare query for excecution
    $stmt = $con->prepare($query);

    //bind the parameters

    $stmt->bindParam(1, $_POST['project']);

    $stmt->bindParam(2, $_POST['name']);  

    // Execute the query
    if($stmt->execute()){
        echo "Ok.";
    }else{
        echo "Bad";
    }

}

//to handle error
catch(PDOException $exception){
    echo "Error: " . $exception->getMessage();
}
?>

<script>
$('form').submit(function(){
    $('.customBtn').prop("disabled", true);
}); 
</script>
<form id='addUserForm' action='#' method='post' border='0'>
    <table>
        <tr>
            echo "<td>Project</td>";
            <td><input type='text' name='project' required></td>
        </tr>
         <tr>
            echo "<td>Name</td>";
            <td><input type='text' name='name' required></td>
        </tr>


        <tr>
            <td colspan="2">        
            <?php if($landcode == "de"): {
            echo "<input type='submit' value='Speichern' class='customBtn'>";
            }
            else: {
            echo "<input type='submit' value='Save' class='customBtn'>"; }
            endif;
            ?>          
            </td>
        </tr>
    </table>
</form>

<div id='pageContent'></div>


<script type='text/javascript'>
$(document).ready(function() {
    $('.customBtn').prop('disabled', false);

    // VIEW USERS on load of the page
    $('#loaderImage').show(0, function() {
      showUsers();
    });


    // clicking the 'VIEW USERS' button
    $('#viewUsers').click(function() {
        // show a loader img
        $('#loaderImage').show(0, function() {
      showUsers();
    });

    // clicking the '+ NEW USER' button
    $('#addUser').click(function(){
        showCreateUserForm();
    });

    // clicking the EDIT button
    $(document).on('click', '.editBtn', function(e) { 

        var user_id = $(e.target).closest('td').find('.userId').text();
        console.log(user_id);

        // show a loader image
        $('#loaderImage').show(1000, function() {
          $('#pageContent').load('cure/update_form.php?user_id=" + user_id + "', function() { 
            $('#loaderImage').hide(); 
          });
       });

        // read and show the records after 1 second
        // we use setTimeout just to show the image loading effect when you have a very fast server
        // otherwise, you can just do: $('#pageContent').load('update_form.php?user_id=" + user_id + "', function(){ $('#loaderImage').hide(); });
        //setTimeout("$('#pageContent').load('cure/update_form.php?user_id=" + user_id + "', function(){ $('#loaderImage').hide(); });",1000);

    }); 


    // when clicking the DELETE button
    $(document).on('click', '.deleteBtn', function() { 
        if ( confirm('Möchten Sie dieses Projekt löschen?') ) {

            // get the id
            var user_id = $(e.target).closest('td').find('.userId').text();

            // trigger the delete file
            $.post("cure/delete.php", { id: user_id })
                .done(function(data) {
                    // you can see your console to verify if record was deleted
                    console.log(data);

                    $('#loaderImage').show(0, function() {
                                          // reload the list
                    showUsers();
                    });



                });

        };
    });


    // CREATE FORM IS SUBMITTED
     $(document).on('click', '#submitForm', function(e) {
        e.preventDefault();
        // show a loader img
        $('#loaderImage').show(0, function() {
                  // post the data from the form
        $.post("cure/create.php", $(this).serialize())
            .done(function(data) {
                // 'data' is the text returned, you can do any conditions based on that
                showUsers();
            });

        });


        return false;

    });

    // UPDATE FORM IS SUBMITTED
     $(document).on('click', '#updateUserForm', function() {

        // show a loader img
        $('#loaderImage').show();

        // post the data from the form
        $.post("cure/update.php", $(this).serialize())
            .done(function(data) {
                // 'data' is the text returned, you can do any conditions based on that
                showUsers();
            });

        return false;
    });

//});

// READ USERS
function showUsers(){
    var kom_id = {{user::id}};
    console.log(kom_id);
    // read and show the records after at least a second
    // we use setTimeout just to show the image loading effect when you have a very fast server
    // otherwise, you can just do: $('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });
    // THIS also hides the loader image
    setTimeout("$('#pageContent').load('cure/read.php?kompetenzpartner=" + kom_id + "', function(){ $('#loaderImage').hide(); });",1000);
} 

// CREATE USER FORM
function showCreateUserForm(){
    var kom_id_2 = {{user::id}};
    console.log(kom_id_2);
    // show a loader image
    $('#loaderImage').show();
    // read and show the records after 1 second
    // we use setTimeout just to show the image loading effect when you have a very fast server
    // otherwise, you can just do: $('#pageContent').load('read.php');
    setTimeout("$('#pageContent').load('cure/create_form.php?kompetenzpartner=" + kom_id_2 + "', function(){ $('#loaderImage').hide(); });",1000);
}

})
</script>


//2
<script>
/*
$('form').submit(function(){
    $('.customBtn').prop("disabled", true);
}); 
*/
</script>
<form id='addUserForm' action='#' method='post' border='0'>
    <table>
        <tr>
            echo "<td>Project</td>";
            <td><input type='text' name='project' required></td>
        </tr>
         <tr>
            echo "<td>Name</td>";
            <td><input type='text' name='name' required></td>
        </tr>


        <tr>
            <td colspan="2">        
            <?php if($landcode == "de"): {
            echo "<input type='submit' value='Speichern' class='customBtn'>";
            }
            else: {
            echo "<input type='submit' value='Save' class='customBtn'>"; }
            endif;
            ?>          
            </td>
        </tr>
    </table>
// submit `form` on `click` instead of utilizing `submit` event.
<input type="button" id="submitForm" value="Submit Form" />
</form>