本文将指导你如何在 WordPress 插件中使用 AJAX 删除数据表中的条目。我们将重点讲解如何正确注册和调用 AJAX 函数，以及如何处理前端的点击事件，并提供示例代码，帮助你理解并解决常见问题。通过本教程，你将掌握在 WordPress 中使用 AJAX 的基本方法，并能将其应用于实际开发中。
前端 JavaScript 代码
首先，我们需要在前端页面添加一个按钮，并绑定一个点击事件，当点击按钮时，通过 AJAX 向 WordPress 后端发送请求。
<input type="button" id="" class="submitDeleteEntry" name="submitDeleteEntry" value="Delete" />
接下来是 JavaScript 代码，它监听按钮的点击事件，并使用 jQuery.ajax() 发送 POST 请求到 WordPress 后端。
jQuery(document).on('click', '.submitDeleteEntry', function () { var id = this.id; jQuery.ajax({ type: 'POST', url: ajaxurl, data: {"action": "fws_delete_row", "id": id}, success: function (data) { // 处理成功后的逻辑，例如从页面上移除该条目 // $(this).closest('tr').fadeOut(); // 示例：淡出删除的行 } });});
关键点：
ajaxurl 是 WordPress 提供的一个全局变量，指向 wp-admin/admin-ajax.php，这是处理 AJAX 请求的入口。data 对象中，action 字段的值必须与你在 add_action() 中注册的钩子名称一致（fws_delete_row）。id 字段传递要删除的条目的 ID。success 回调函数处理请求成功后的逻辑，例如更新页面内容。
后端 PHP 代码
接下来，我们需要在 WordPress 后端注册一个 AJAX 函数，用于处理前端发送的请求。
function fws_delete_row(){ global $wpdb; $dbtable = $wpdb->prefix . 'fws_fixtures'; $id = $_POST['id']; // 安全性检查：确保 $id 是一个整数 $id = intval($id); $result = $wpdb->delete($dbtable, array('id' => $id)); if ($result === false) { // 删除失败 wp_send_json_error(array('message' => '删除失败')); } else { // 删除成功 wp_send_json_success(array('message' => '删除成功')); } wp_die(); // 确保 AJAX 请求正确结束}add_action( 'wp_ajax_fws_delete_row', 'fws_delete_row' );add_action( 'wp_ajax_nopriv_fws_delete_row', 'fws_delete_row' );
关键点：
wp_ajax_fws_delete_row 钩子用于处理已登录用户的 AJAX 请求。wp_ajax_nopriv_fws_delete_row 钩子用于处理未登录用户的 AJAX 请求（如果你的插件需要在未登录状态下也能使用）。$_POST[‘id’] 获取前端传递的 ID 值。$wpdb->delete() 函数用于从数据库中删除数据。wp_send_json_success() 和 wp_send_json_error() 函数用于向前端发送 JSON 格式的响应。wp_die() 函数用于结束 AJAX 请求，防止出现意外的输出。安全性至关重要： 在使用 $_POST[‘id’] 之前，务必进行数据验证和清理，防止 SQL 注入等安全问题。 建议使用 intval() 将其转换为整数。
正确加载 JavaScript 代码
一个常见的错误是将 JavaScript 代码直接放在页面底部，导致 ajaxurl 变量未定义。正确的做法是将 JavaScript 代码注册并加载到 WordPress 的 admin_footer 钩子中。
add_action( 'admin_footer', 'fws_delete_javascript' );function fws_delete_javascript() { ?>jQuery(document).ready(function($) { // 确保 jQuery 可用 jQuery(document).on('click', '.submitDeleteEntry', function () { var id = this.id; jQuery.ajax({ type: 'POST', url: ajaxurl, data: {"action": "fws_delete_row", "id": id}, success: function (data) { // 处理成功后的逻辑 if (data.success) { //console.log(data.data.message); // 输出成功消息 $(this).closest('tr').fadeOut(); // 淡出删除的行 } else { //console.error(data.data.message); // 输出错误消息 } }.bind(this), // 修正this指向 error: function(jqXHR, textStatus, errorThrown) { console.error("AJAX Error:", textStatus, errorThrown); } }); });});<?php}
关键点：
使用 admin_footer 钩子确保在页面底部加载 JavaScript 代码。使用 jQuery(document).ready(function($) { … }); 确保 jQuery 库已经加载完毕。使用 $.ajax() 方法发送 AJAX 请求。在 success 回调函数中处理服务器返回的数据。添加 error 回调函数来处理 AJAX 请求失败的情况。使用 .bind(this) 修正 this 指向，确保在 success 函数中 this 指向触发点击事件的元素。
总结
通过以上步骤，你应该能够成功地在 WordPress 插件中使用 AJAX 删除数据表中的条目。 记住，安全性是至关重要的，务必对用户输入进行验证和清理。 此外，良好的错误处理机制可以帮助你更好地调试和维护你的代码。 掌握这些技巧，你就能更有效地利用 AJAX 技术，提升 WordPress 插件的交互性和用户体验。
以上就是使用 WordPress AJAX 删除数据表条目的教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/81307.html
微信扫一扫 
支付宝扫一扫 
