javascript - AJAX/PHP 更新功能和删除不起作用

Question

试图找到任何与我类似的问题，但没有运气。我的问题与其他问题的不同之处在于，首先，我的更新按钮不起作用。每次我单击更新按钮时，都不会出现模式。第二个是删除我可以单击删除按钮但删除功能不起作用。尝试调试了几天，但它不起作用。这两个没有显示任何错误，我试图在浏览器的开发人员工具中检查网络响应是否有任何问题，但我根本找不到任何问题。我希望任何人都可以帮助我，我仍然是 AJAX 的初学者，对 PHP 还有些陌生。

这是我的代码，以防您发现我找不到的东西。

表格.php

        <div id="userModal" class="modal fade">
            <div class="modal-dialog">
                <form method="post" id="user_form" enctype="multipart/form-data">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Add User</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <label>Enter First Name</label>
                            <input type="text" name="first_name" id="first_name" class="form-control" />
                            <br />
                            <label>Enter Middle Name</label>
                            <input type="text" name="middle_name" id="middle_name" class="form-control" />
                            <br />
                            <label>Enter Last Name</label>
                            <input type="text" name="last_name" id="last_name" class="form-control" />
                            <br />
                            <label>Enter Address</label>
                            <input type="text" name="address" id="address" class="form-control" />
                            <br />
                            <label>Enter Contact Number</label>
                            <input type="text" name="contact_number" id="contact_number" class="form-control" />
                            <br />
                            <label>Enter Date of Birth</label>
                            <input type="text" name="birth_date" id="birth_date" class="form-control" />
                            <br />
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="user_ID" id="user_ID" />
                            <input type="hidden" name="operation" id="operation" />
                            <input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
      </div>
      
  <!-- Page level custom scripts -->


<script type="text/javascript" language="javascript">
    $('#add_button').click(function(){
        $('#user_form')[0].reset();
        $('.modal-title').text("Add User");
        $('#action').val("Add");
        $('#operation').val("Add");
    });
    var dataTable = $('#userList').DataTable({
        "processing":true,
        "serverSide":true,
        "order":[],
        "ajax":{
            url:"datatable.php",
            type:"POST"
        },
        "columnDefs":[
            {
                "targets":[0,7,8],
                "orderable":false,
            },
        ],
    });
    $(document).on('submit', '#user_form', function(event){
        event.preventDefault();
        var firstName = $('#first_name').val();
        var middleName = $('#middle_name').val();
        var lastName = $('#last_name').val();
        var address = $('#address').val();
        var contactNumber = $('#contact_number').val();
        var birthDate = $('#birth_date').val();

        if(firstName != '' && middleName != '' && lastName != '' && address != '' && contactNumber != '' && birthDate != '' )
        {
            $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data)
                {
                    alert(data);
                    $('#user_form')[0].reset();
                    $('#userModal').modal('hide');
                    dataTable.ajax.reload();
                }
            });
        }
        else
        {
            alert("Both Fields are Required");
        }
    });
    $(document).on('click', '.update', function(){
        var user_ID = $(this).attr("user_id");
        $.ajax({
            url:"fetch_single.php",
            method:"POST",
            data:{user_ID:user_ID},
            dataType:"json",
            success:function(data)
            {
                $('#userModal').modal('show');
                $('#first_name').val(data.first_name);
                $('#middle_name').val(data.middle_name);
                $('#last_name').val(data.last_name);
                $('#address').val(data.address);
                $('#contact_number').val(data.contact_number);
                $('#birth_date').val(data.birth_date);
                $('.modal-title').html("<i class='fa fa-plus'></i> Update User");
                $('#user_ID').val(user_ID);
                $('#action').val("Edit");
                $('#operation').val("Edit");

            }
        })
    });

    $(document).on('click', '.delete', function(){
        var user_ID = $(this).attr("user_id");
        if(confirm("Are you sure you want to delete this?"))
        {
            $.ajax({
                url:"delete.php",
                method:"POST",
                data:{user_ID:user_ID},
                success:function(data)
                {
                    alert(data);
                    dataTable.ajax.reload();
                }
            });
        }
        else
        {
            return false;
        }
    });

</script>
</body>

</html>

插入.php

<?php
include('db.php');
include('function.php');
if(isset($_POST["operation"]))
{
    if($_POST["operation"] == "Edit")
    {
        $statement = $connection->prepare(
            "UPDATE user
            SET user_fname = :user_fname, user_mname = :user_mname, user_lname = :user_lname,
            user_address = :user_address, user_contactnumber = :user_contactnumber, user_birthdate = :user_birthdate
            WHERE user_id = :user_id
            "
        );
        $result = $statement->execute(
            array(
                ':first_name'   =>  $_POST["user_fname"],
                ':last_name'    =>  $_POST["user_mname"],
                ':last_name'    =>  $_POST["user_lname"],
                ':address'      =>  $_POST["user_address"],
                ':contact_number'   =>  $_POST["user_contactnumber"],
                ':birth_date'   =>  $_POST["user_birthdate"],
                ':user_id'      =>  $_POST["user_id"]
            )
        );
        if(!empty($result))
        {
            echo 'Data Updated';
        }
    }
}

?>

fetch_single.php

<?php
include('db.php');
include('function.php');
if(isset($_POST["user_ID"]))
{
    $output = array();
    $statement = $connection->prepare(
        "SELECT * FROM user
        WHERE user_id = '".$_POST["user_id"]."'
        LIMIT 1"
    );
    $statement->execute();
    $result = $statement->fetchAll();
    foreach($result as $row)
    {
        $output[] = $row['user_fname'];
        $output[] = $row['user_mname'];
        $output[] = $row['user_lname'];
        $output[] = $row['user_address'];
        $output[] = $row['user_contactnumber'];
        $output[] = $row['user_birthdate'];
    }
    echo json_encode($output);
}
?>

删除.php

<?php

include('db.php');
include("function.php");

if(isset($_POST["user_ID"]))
{
    $statement = $connection->prepare(
        "DELETE FROM user WHERE user_id = :user_id"
    );
    $result = $statement->execute(
        array(
            ':user_id'  =>  $_POST["user_ID"]
        )
    );

    if(!empty($result))
    {
        echo 'Data Deleted';
    }
}



?>

编辑：忘记添加重要代码

数据表.php

<?php
include('db.php');
include('function.php');
$query = '';
$output = array();
$query .= "SELECT user_id, user_fname, user_mname, user_lname, user_address, user_contactnumber,user_birthdate FROM user ";
if(isset($_POST["search"]["value"]))
{
    $query .= 'WHERE user_id LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= ' OR user_fname LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= ' OR user_mname LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= ' OR user_lname LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= ' OR user_address LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= ' OR user_contactnumber LIKE "%'.$_POST["search"]["value"].'%" ';
    $query .= ' OR user_birthdate LIKE "%'.$_POST["search"]["value"].'%" ';
}
if(isset($_POST["order"]))
{
    $query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
    $query .= 'ORDER BY user_id DESC ';
}
if(isset($_POST["length"]) && $_POST["length"] != -1)
{
    $query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connection->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
    $userRows = array();
    $userRows[] = $row['user_id'];
    $userRows[] = $row['user_fname'];
    $userRows[] = $row['user_mname'];
    $userRows[] = $row['user_lname'];
    $userRows[] = $row['user_address'];
    $userRows[] = $row['user_contactnumber'];
    $userRows[] = $row['user_birthdate'];
    $userRows[] = '<button type="button" name="update" id="'.$row["user_id"].'" class="btn btn-warning btn-xs update">Update</button>';
    $userRows[] = '<button type="button" name="delete" id="'.$row['user_id'].'" class="btn btn-danger btn-xs delete">Delete</button>';
    $data[] = $userRows;
}
$output = array(
    "draw"              =>  intval($_POST["draw"]),
    "recordsTotal"      =>  $filtered_rows,
    "recordsFiltered"   =>  get_total_all_records(),
    "data"              =>  $data
);
echo json_encode($output);
?>

标签： javascriptphpjqueryajax