时间戳

首页 > 解决方案 > 单击子菜单页面时如何发出ajax请求？

javascript - 单击子菜单页面时如何发出ajax请求？

问题描述

我在function.php中有以下带有子页面的菜单页面：

function data_menu() {
    add_menu_page(
        'Data',
        'Data',
        'administrator',
        'data',
        'data_content'
    );    
     add_submenu_page( 
        'Data' , 
        'Data', 
        'Data', 
        'manage_options', 
        'data',
        'data_content'
    );

}

add_action('admin_menu', 'data_menu');

我想向 PHP 文件发送 Ajax 请求，因此我在function.php的管理仪表板中添加了 javascript 文件：

function admin_scripts() {
    wp_enqueue_script('my_custom_script', get_template_directory_uri() . '/js/script.js');
}

add_action('admin_enqueue_scripts', 'admin_scripts');

在该文件script.js中：

window.onload = function(){
    $(document).on('click', '#toplevel_page_data ul.wp-submenu li:last-of-type', function() {
    console.log('menu clicked');
    $.post('file path', {}, 
        function(data){
            console.log(data)
        });
    });
};

然后当我点击菜单时，这句话menu clicked被记录在控制台中。

我认为问题在于 Ajax 请求在打开页面之前没有花费足够的时间来完成。

页面 URL 变为：

http://website.com/wp-admin/admin.php?page=data

有没有办法在单击菜单时发出 Ajax 请求？

标签： javascriptphpjqueryajaxwordpress

解决方案

在要跟踪视图而不是听菜单按钮点击的页面上使用 ajax 请求会不会更容易？

$( document ).ready(function() {
    // ajax request
});

否则，如果您真的想在菜单单击上发布请求，则必须拦截菜单单击，以便在路由之前发出请求。就像是：

$('.menu-link').click(function (e) {
    e.preventDefault(); // otherwise, it won't wait for the ajax response
    $link = $(this); // because '$(this)' will be out of scope in your callback

    $.ajax({
        type: 'POST',
        url: '/url-to-post-to',
        data: mydata,
        contentType: 'application/json',
        error: function (err) {
            alert("error - " + err);
        },
        success: function () {
            window.location.href = $link.attr('href');
        }
    });
});

信用：https ://stackoverflow.com/a/16563830/4820395

推荐阅读