子比主题进阶玩法 – ajax实现点击按钮弹出子比提示框

前言

之前写子比的提示框都是写jq代码去处理ajax，最近试了试wp_ajax钩子来实现这个效果。本教程只适用于有些php基础的进阶玩法！

示例代码

function代码(或func.php)

function zib_ajax_notyf(){
    // echo zib_send_json_error(array('msg' => '这是一个测试失败提示'));
    echo zib_send_json_success(array('msg' => '这是一个测试成功提示'));
    wp_die();
}
add_action('wp_ajax_zib_ajax_notyf' , 'zib_ajax_notyf');

执行代码

<div class="box-body text-center">
        <a class="but c-blue padding-lg mr10" value="demo_btn" zibajax="submit" form-action="zib_ajax_notyf">点击执行</a>
    </div>

代码解释

function中首先创建了个函数 命名一下(不重复即可)，子比自带提示的函数 例如zib_send_json_success成功函数，zib_send_json_error失败函数，只需要echo输出一下这个函数并里面传递一个数据即可，之后使用动作钩子挂到wp_ajax_(action)即可，使用示例

add_action( 'wp_ajax_xxxxxxx', 'xxxxxxxxx' );

在页面中写一个按钮并传入action即可，因为子比自带了按钮的class，所以就使用子比的样式，这里使用的a标签创建的按钮。zibajax=”submit”处理ajax，form-action=”动作名”这里与之前的wp_ajax_(action)一致

未登录用户

wp_ajax_(action)这个钩子是处理已登录用户的，如果没登录用户也需要进行处理。这里使用wp_ajax_nopriv_(action)钩子，通常wp_ajax和wp_ajax_nopriv一起使用

ajax处理流程

发送一个ajax请求后处理情况，下面是一个处理示例。同样也是action动作。

jQuery.ajax({
    url: ajaxurl, 
    type: 'POST',
    data: {
        action: 'zib_ajax_notyf',
    },
    success: function(response) {
        if (response.success) {
            console.log(response.data.msg);
        } else {
            console.error(response.data.msg);
        }
    }
});

效果图

转载 https://www.zibll.com/forum-post/40809.html