Question

在我的页面中，我有以下代码，每个add-to-favor-后跟一个唯一的hash，以区分我的多个结果。

<a class="btn btn-default btn-sm m-t-10 add-to-favor-'.$active[hash].'">
    <i class="text-danger fa fa-heart"></i>
</a>

问题在于我不知道如何为我的问题找到一个通用的解决方案。我想将active[hash]传递给ajax帖子。我应该使用数据属性吗？如果是，怎么样？

$(function(){
    $('body').on('click', '.add-to-favor', function (){  
        $.ajax({
            cache: false,
            type: 'POST',
            url: ,
            data: ,
            success: function(data) {
                $('#show_the_favor').html(data);
            }
        });
    });
});

Answer 1

是的，您应该使用data-*属性。

您将数据属性指定为data-some-name="value"。要获得该值，请使用.data('some-name')

<a data-hash="<?= $active['hash']; ?>" data-target="#show_the_favor" class="add-to-favor"></a>

$(document).ready(function () {
    $(document).on('click', '.add-to-favor', function () {
        var el = $(this);

        $.ajax({
            cache: false,
            type: 'POST',
            url: 'someUrl',
            data: {hash: el.data('hash')},
            success: function(data) {
                $(el.data('target')).html(data);
            }
        });
    });
});

Answer 2

是的，使用自定义属性。对于您的<a>元素，请添加类add-to-favor，但不要将哈希附加到该类。然后，添加另一个属性data-hash="' . $active[hash] . '"：

<a class="btn btn-default btn-sm m-t-10 add-to-favor" data-hash="' . $active[hash] . '">
    <i class="text-danger fa fa-heart"></i>
</a>

JS：

$(function() {
  $('body').on('click', '.add-to-favor', function() {
    var hash = $(this).attr('data-hash');
    $.ajax({
      cache: false,
      type: 'POST',
      url: "script.php", // Enter the AJAX script URL
      data: {
          hash: hash
      },
      success: function(data) {
        $('#show_the_favor').html(data);
        // If you want to show the hash inside #show_the_favor, replace `data` above with `hash`
      }
    });
  });
});

Answer 3

您可以使用：

$('body').on('click', '[class*="add-to-favor"]', function (){
    var hash = $(this).attr('class').match(/add-to-favor-([^ ]+)/)[1];
    $.ajax({
      cache: false,
      type: 'POST',
      url: SomeUrl,
      data: {hash:hash},
      success: function(data) {
        $('#show_the_favor').html(data);
      }
   });
});

或仅使用数据属性：

<a class="btn btn-default btn-sm m-t-10" data-hash="'.$active[hash].'">
    <i class="text-danger fa fa-heart"></i>
</a>

并使用$(this).data('hash')获取哈希值。

Answer 4

为什么不制作自己的Javascript函数来执行此操作？

<强> HTML：

<a class="btn btn-default btn-sm m-t-10" onclick="add_to_favor('.$active[hash].');">
    <i class="text-danger fa fa-heart"></i>
</a>

<强>的Javascript / JQuery的：

<script type="text/javascript">

function add_to_favor(hash){

  alert("pass it to your ajax: "+hash);

  $.ajax({
      cache: false,
      type: 'POST',
      url: ,
      data: ,
      success: function(data) {
          $('#show_the_favor').html(data);
      }
  });
}

</script>

当我想发布变量但有1个js时，ajax帖子的解决方案是什么？

4 个答案: