javascript - 使用 jquery 对话框中的 html 表单更新 mysql 中的数据

Question

我需要帮助制作一个页面，您可以在其中查看来自 mysql 查询的数据。每一行都作为具有唯一 id 的 div 回显。

<div class="column" id="<?php echo $row['id']; ?>">

与mysql数据库中的数据具有相同的id。每个 div 都包含一个编辑按钮:

<a href="edit_column.php?id=<?php echo $row['id'] ?>" class="edit">Edit</a>

点击“编辑”后，执行 jQuery 脚本:

$('.edit').on('click', function() {
            var url = this.href;
            var dialog = $("#dialog");
            if ($("#dialog").length == 0) {
                dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
            }
            dialog.load(
                url,
                {},
                function(responseText, textStatus, XMLHttpRequest) {
                    dialog.dialog();
                }
                );
            return false;
        })

然后，弹出一个带有 HTML 表单的对话框，我什至设法将 MySQL 数据放入该表单中进行编辑。但现在我不知道如何继续。我应该如何继续更新数据库中的数据？我知道如何用 PHP 更新它，我什至有一个 PHP 脚本 update_column.php 但我不知道如何从对话框中执行它并刷新相应的 div 具有更新数据的元素，无需在浏览器中刷新整个页面。在 edit_column.php 中，我只有 HTML 表单和从 MySQL 数据库返回数据的 PHP 脚本。

Answer 1

您所要做的就是添加事件，以您从第一次 ajax 调用获得的 ajax 表单中的一个项目提交编辑表单，您还必须保存编辑 ID，您可以将其保存到全局变量中，

var editId;
$('.edit').on('click', function() {
        var url = this.href;
        editId = $(this).attr('id');
        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {},
            function(responseText, textStatus, XMLHttpRequest) {
                dialog.dialog();
            }
            );
        return false;
    });

/*
this is the event that will submit the ajax form
*/
    $('body').on('click', '#elementToSubmit', function() {
      formData = $('#ajaxForm').serialize();
      formData.id = editId;
      $.post('proccessEdit.php', formData, function(result) {// do something like hiding the modal or showing loading image

      });
    });

在您的 php 文件中，为特定 ID 生成动态表单的文件必须如下所示

<form id="ajaxForm">
<!-- some inputs -->
</form>
<!-- this will submit the ajaxForm -->
<a id="elementToSubmit">Save modifications</a>