时间戳

首页 > 解决方案 > 使用 AJAX 在前端删除 WordPress 帖子

javascript - 使用 AJAX 在前端删除 WordPress 帖子

问题描述

我正在尝试使用 AJAX 从前端删除 WordPress 帖子。我的代码删除了帖子，但显示“成功”的空白页面，当我只想淡出这篇文章而不重新加载页面并显示空白页面时。

PHP代码：

<?php if( current_user_can( 'delete_post' ) ) : ?>
        <?php $nonce = wp_create_nonce('my_delete_post_nonce') ?>
        <a href="<?php echo admin_url( 'admin-ajax.php?action=my_delete_post&id=' . get_the_ID() . '&nonce=' . $nonce ) ?>" data-id="<?php the_ID() ?>" data-nonce="<?php echo $nonce ?>" class="delete-post">delete</a>
    <?php endif ?>

Functions.php 代码：

function my_frontend_script() {
wp_enqueue_script( 'my_script', get_template_directory_uri() . '/js/my_script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_frontend_script' );
wp_localize_script( 'js/my_script.js', 'MyAjax2', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'ajaxnonce' => wp_create_nonce('ajax-nonce') ) );


add_action( 'wp_ajax_my_delete_post', 'my_delete_post' );
function my_delete_post(){

    $permission = check_ajax_referer( 'my_delete_post_nonce', 'nonce', false );
    if( $permission == false ) {
        echo 'error';
    }
    else {
        wp_delete_post( $_REQUEST['id'] );
        echo 'success';
    }

    die();
}

my_script.js 代码：

jQuery( document ).ready( function($) {
    $(document).on( 'click', '.delete-post', function() {
        var id = $(this).data('id');
        var nonce = $(this).data('nonce');
        var post = $(this).parents('.post:first');
        $.ajax({
            type: 'post',
            url: MyAjax2.ajaxurl,
            data: {
                action: 'my_delete_post',
                nonce: nonce,
                id: id
            },
            success: function( result ) {
                if( result == 'success7' ) {
                    post.fadeOut( function(){
                        post.remove();
                    });
                }
            }
        })
        return false;
    })
})

问题是页面正在重新加载到带有“成功”文本的空白页面，此时它应该只是淡出并从当前页面删除帖子，而不重新加载。

看起来 my_script.js 甚至根本没有使用:(

非常感谢任何帮助。

标签： javascriptphpjqueryajaxwordpress

解决方案

<a href="<?php echo admin_url( 'admin-ajax.php?action=my_delete_post&id=' . get_the_ID() . '&nonce=' . $nonce ) ?>" data-id="<?php the_ID() ?>" data-nonce="<?php echo $nonce ?>" class="delete-post">delete</a>

它正在重新加载，因为它首先加载您的 href 属性中的 url，然后执行您的 ajax 调用。那不是你想要的。您只想执行 onclick。这应该可以解决问题。只需在您的href中添加一个#

<a href=# data-id="<?php the_ID() ?>" data-nonce="<?php echo $nonce ?>" class="delete-post">delete</a>

或制作按钮

<button data-id="<?php the_ID() ?>" data-nonce="<?php echo $nonce ?>" class="delete-post">delete</button>

编辑：如果它仍然不起作用，那是因为你在这里有一个错字

if( result == 'success7' )

成功7而不是成功

推荐阅读