変数をポストしたいのに1 jsがある場合、ajaxポストのソリューションとは何ですか？

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> 

問題は、私の問題に1つの普遍的な解決策を持たせる方法がわからないことです。私は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

はい、カスタム属性を使用します。 <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 2

をはい、あなたはdata-*属性を使用する必要があります。

データ属性をdata-some-name="value"と指定します。

$('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')を使用してハッシュを取得し、その値を使用して、.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 3

を取得するには、これを使用することができます。

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の：これでJSの変更を行う方法を

<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>