使用 AJAX 编辑数据库中的数据。（首先使用 AJAX 将数据获取到输入，然后使用 AJAX 将其更新到数据库）答案

【问题标题】：Using AJAX to edit data from the database. (Fetch the data first to an input using AJAX and then update it to the database using AJAX)使用 AJAX 编辑数据库中的数据。（首先使用 AJAX 将数据获取到输入，然后使用 AJAX 将其更新到数据库）
【发布时间】：2020-05-09 08:24:57
【问题描述】：

所以我基本上是 AJAX 的新手，我很难解决这个问题。首先，我有一张桌子。我有一个获取 id 的 onclick 函数。 <a href="javascript:void(0);" onClick="showEdit(this.id)" id="<?php echo $catrow['categoryid'];?>"></a> 这应该使用 id 从数据库中选择一些数据，将其存储在模态中，然后可以使用模态编辑这些数据，然后将其存储回数据库中......所有这些都无需重新加载页面。

    function showEdit(catid){
$.ajax({
    url: "edit-check.php",
    type: 'POST',
    data: {"catid":catid},
    success: function(data){    
        console.log(data);
        var show = $('#showEdit').attr('id');
        document.getElementById(show).innerHTML = data; 
        $('#addContactModal').modal('show');

    },
});
}

这是edit-check.php

   <?php
    include ('../connect.php');
    if(isset($_POST['catid'])){
$id=$_POST['catid'];
$checkquery = "SELECT * FROM category WHERE categoryid='$id';";
$checkcategory=mysqli_query($conn,$checkquery);
if (mysqli_num_rows($checkcategory) == 0){
    echo ("//");
}
else{
    $crow = mysqli_fetch_assoc($checkcategory);
?>
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalTitle" aria-hidden="true">
        <form id="editCategory" autocomplete="off" enctype="multipart/form-data" method="post" name="form">
            <input type="text" class="form-control" name="category_id" id="category_id" readonly value="<?php echo $crow['categoryid'];?>">
            <input type="text" name='category_name' id="category_name" class="form-control form-control-danger" placeholder="Food" value="<?php echo $crow['categoryname'];?>">
            <input name="file" type="file" id='file' />
            <textarea class="form-control" name="about_category" id="about_category" rows="6"><?php echo $crow['aboutcategory'];?></textarea>

            <div class="modal-footer">
                <button type="submit" name="addCategoryBtn" id="add_category" class="btn btn-success"> <i class="fa fa-check"></i> Update Category </button>
                <button class="btn btn-dark" data-dismiss="modal"> Discard</button>
            </div>
        </form>

</div>
<?php }}?>

在此之前代码运行良好...

然后我有另一个函数应该阻止这个模态提交。（但事实并非如此）。页面只是重新加载

    $(function() {
    $("form#editCategory").submit(function(z) {
    z.preventDefault();    
    var formData = new FormData(this);


        $.ajax({
            url: "add-check.php",
            type: 'POST',
            data: formData,
            success: function(data){
               alert('worked');
            },
            cache: false,
            contentType: false,
            processData: false
        });
})    
});

【问题讨论】：

$("form#editCategory") 似乎无法正常工作或无法捕获事件，因为您正在文档中动态添加表单。
试试$(".editCategory").on('submit',function(z){z.preventDefault()});
在<form class="editCategory" autocomplete="off" enctype="multipart/form-data" method="post" name="form" >中添加类editCategory
谢谢，我试过了，还是不行。
@DhavalPurohit 是对的。页面加载时指定的选择器和事件处理程序将仅匹配页面加载时存在的元素。您在页面加载之后添加新元素，而您的事件侦听器将与它们不匹配 - jQuery 不知道这些新元素。您需要将处理程序委托给加载时存在的元素，并过滤以仅匹配您的目标元素。这是一个非常常见的问题，这里有很多重复和变化的 SO，here's one。

标签： php jquery mysql ajax

【解决方案1】：

谢谢你们。我试过了，效果很好。

$('body').on('click', '#add_category', function(z) {z.preventDefault();});

【讨论】：