Question

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

首先我认为可能是我经常推送提交按钮。所以我在表单中添加了一个.submit函数。但没有解决多次插入。

HTML Index.html

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


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

    // VIEW USERS on load of the page
    $('#loaderImage').show();
    showUsers();

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

        showUsers();


    });

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

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

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

        // 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('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 = $(this).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();

                    // reload the list
                    showUsers();

                });

        }
    });


    // CREATE FORM IS SUBMITTED
     $(document).on('submit', '#addUserForm', function() {

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

        // 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('submit', '#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>

的 create.php 的

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

* 以及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>

当我看一下Chrome Developer-Tool时，我发现它发送了3次create.php。所以有人知道我该怎么办呢？还是解决它？！ Here a screenshot of the chrome tool

Answer 1

由于3次提交实例，或许form提交3次。 1）如果使用button click event来submit form; 2）帖子“格式”顶部的.submit()方法，然后; 3）在$.post()。

如果没有发布html，则不确定。可能用3以上的 1 完成。

修改

注意

对#viewUsers，.editBtn，.deleteBtn，#updateUserForm不确定在html内未显示为index.html。请澄清这些要素标签存在？

另外。 setTimeout可替代.show(1000, function() {/* callback */}) 在showUsers()和showCreateUsersForm

下面可能还有一些冗余。或许尝试替换click 作为submit的{{1}}，已映射到event或click的{{1}} 元素？

如果可能，请从button发布所有input type='button'。

不确定文档中的html或“php文件”。

尝试

index.html

Jquery $ .post脚本运行三次（多个INSERT）

1 个答案: