使用ajax调用php函数查询api

我正在尝试联系Wordpress中的外部API。其思想是用户按下按钮链接，通过ajax调用php函数，将数据从API加载到页面上

The button: 
<a data-id="5" class="product-cat">Product Category</a>

The ajax function:
    $(document).on( 'click', '.product-cat', function( event ) {
    $product = $(this);

    $.ajax({
        url: ajaxproducts.ajaxurl,
        type: 'post',
        data: {
            action: 'ajax_product_load',
            datavar: $product.data( 'data-id' )
        },

        success: function ( result ) {
            alert( result );
        }
    })
})(jQuery);

按钮：
产品类别
ajax功能：
$（文档）.on（'click'，'product cat'，函数（事件）{
$product=$（此项）；
$.ajax({
url:ajaxproducts.ajaxurl，
键入：“post”，
数据：{
操作：“ajax\u产品\u加载”，
datavar:$product.data（'dataid'））
},
成功：功能（结果）{
警报（结果）；
}
})
})（jQuery）；

---

我现在遇到的问题是，当我点击链接时，什么都没有发生。任何帮助都将不胜感激。谢谢

最好只将单击事件附加到按钮，并更新获取数据id的方式，您可以这样做：

$('.product-cat').click(function() {


$product = $(this);

    $.ajax({
        url: ajaxproducts.ajaxurl,
        type: 'post',
        data: {
            action: 'ajax_product_load',
            datavar: $product.data( 'data-id' )
        },

        success: function ( result ) {
            alert( result );
        }
    })
});

$（“.product cat”）。单击（函数（）{
//播种数据id的内容
console.log（$（this.attr（'data-id'））；
//您也可以使用
console.log（$（this.data（'id'））；
/*$.ajax({
url:ajaxproducts.ajaxurl，
键入：“post”，
数据：{
操作：“ajax\u产品\u加载”，
datavar:$（this.attr（'data-id'））
},
成功：功能（结果）{
警报（结果）；
}
})*/
});

产品类别
在开始回答问题之前，您可以先浏览网站，以便了解如何做好这项工作。最好将“单击产品”附加到文档中。此外，要获取id，您可以使用$（this.attr（'data-id'）@temaniaf，如果您的意思是
$（this.data（'id'）
对吗？@Elli浏览器控制台显示了什么？@lawrencerone两者都正确；）@Elli还在等你回答浏览器控制台显示了什么？@Lawrencerone更新了我的答案，显示了这两个选项仍然不是问题，我正在等待OP提到CORS阻塞，因为似乎每个人都错过了问题的第一句话我正在尝试联系外部APIyes，但他说“什么都没有发生”当我们看到只有成功实现时，这意味着它会出错，并且我确信它与datavar有关，而datavar是不正确的。。。也许这不是唯一的问题，但这是错误的。感谢您的评论。所以这是可行的，然而，在我当地的发展中，什么都没有发生。我的控制台里什么也没显示。我相信我的脚本已正确排队，但控制台中没有显示任何内容。@Elli您是否可以添加错误部分以查看它是否落在那里？