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

最好将click事件仅附加到按钮，并更新如何获取data-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 );
        }
    })
});

使用ajax调用php函数来查询api

2 个答案: