使用ajax调用php函数查询api

Question

我正在尝试联系 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);

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

Answer 1

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

$(".product-cat").click(function() {
  //to sow the content of data-id
  console.log($(this).attr('data-id'));
  // you may also use 
  console.log($(this).data('id'));
  
  

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-id="5" class="product-cat">Product Category</a>

Answer 2

$('.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 );
        }
    })
});