javascript - 嵌套在 AJAX 输出中的 jQuery AJAX 函数 (innerHTML)

Question

我使用 jQuery Ajax (innerHTML) 从 MySQL 数据库生成记录列表。我想在每条记录旁边放置一个 DELETE 按钮。

一旦您按下DELETE 按钮，该记录将从数据库中删除并从显示的列表中淡出。是否可以这样做 - 在 innerHTML 输出中嵌套另一个 jQuery Ajax 函数？

请注意，我使用的 DELETE 函数与标准 PHP/HTML 输出完美配合。

在主 php 文件 (test1.php) 中，我有表格来选择一个时间范围，一旦表格被提交，下面的函数就会在同一个文件中生成我的输出:

<div id="display_taxation_data"></div>

负责生成listing的代码:

function showDataLabour(str) {
if (str == "") {
    document.getElementById("display_taxation_data").innerHTML = "<h3>No results. Please select taxation period.</h3><hr>";
    return;
} else {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("display_taxation_data").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET","accounting_get_period_data_labour.php?period="+str,true);
    xmlhttp.send();
    }
}

accounting_get_period_data_labour.php 的代码(根据先前选择的时间范围生成的记录集。)

echo "<tr id='record-$id'>";
echo "<td width='40'><a href='accounting_expenses_delete.php?delete=$id' class='delete'><i class='fa fa-times fa-2x' aria-hidden='true' title='Delete'></i></a></td>";
echo '</tr>';

并删除我想在按下按钮 DELETE 时触发的功能:

$(function() {
$('a.delete').click(function(e) {
    e.preventDefault();
    var parent = $(this).parent("td").parent("tr");
    console.log('idno : ' + parent);
    $.ajax({
        type: 'post',
        url: 'accounting_expenses_delete.php',
        data: 'delete=' + parent.attr('id').replace('record-',''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},100);
        },
        success: function() {
            parent.fadeOut(100,function() {
                parent.remove();
            });
        }
    });
});
});

最后是 accounting_expenses_delete.php 的短代码

<?
include "connectdb_mysqli.php"; 
$testdel = $_POST['delete'];
$result = $mysqli->query("DELETE FROM `test` WHERE id='$testdel'"); 
 ?>

如果您需要更多信息，请告诉我。

期待您就如何实现 DELETE 操作提供建议或解决方案。谢谢

Answer 1

我们可以为每个要删除的链接添加一个data-id标签:

echo '<td width="40">
          <a href="#" data-id="'.$id.'" class="delete"><i class="fa fa-times fa-2x" aria-hidden="true" title="Delete"></i></a>
      </td>';

单击此按钮后，它将运行 Ajax 请求:

$(document).on('click', '.delete', function(e) {

    e.preventDefault();

    var elem = $(this),
        id = elem.attr('data-id'); /* GET THE ID NO. OF THE CLICKED DELETE LINK */

    $.ajax({ /* AJAX REQUEST */
        type: 'post',
        url: 'accounting_expenses_delete.php',
        data: {'delete-id': id},
        success: function() {
            elem.closest('tr').hide(200);
        }
    });
    return false;
});

然后为您的 accounting_expenses_delete.php:

include('connectdb_mysqli.php');

$stmt = $mysqli->prepare("DELETE FROM test WHERE id = ?");
$stmt->bind_param("i", $_POST["delete-id"]);
$stmt->execute();
$stmt->close();

我用了prepared statement执行上面的 DELETE 查询。

---

注意事项:

jQuery是一个 javascript 库，而我提供的脚本是一个 jQuery，所以这意味着您必须在脚本之前首先包含 jQuery 库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script>
    /* YOUR JQUERY SCRIPT HERE */
</script>