ポストhrefの値

Question

<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('a').click(function(){ 
 
     $.get('data.php', {'page':$(this).attr("data")}, function(data){ 
 
     $('#content').html(data); 
 
     });       
 
    }); 
 
}); 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

<a href="#" data ="ajkdfk">apple</a> 
 
<a href="#"data ="kasnfjk">pear</a> 
 
<a href="#" data ="ankjlfs">banana</a> 
 
<div id="content"></div>

私は"data=ajkdfk"のようにAjaxの機能にhref tagのデータ属性の値を送信し、データには、この値に送信します。

PHPページには、私のデータベースにそれを更新します。

Answer 1

のみdata属性が機能しません。 data- *で、*を使用するキーに置き換えます。

そして、定義されたキーを使用して値を取得、

HTMLコードは次のようになり、次のjQueryコードとともに

<a href="#" data-pagename ="ajkdfk">apple</a> 
<a href="#"data-pagename ="kasnfjk">pear</a> 
<a href="#" data-pagename ="ankjlfs">banana</a> 
<div id="content"></div> 

、

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('a').click(function(){ 
     var pagenamevalue=$(this).data('pagename'); 
     $.get('data.php', {'page':pagenamevalue}, function(data){ 
     $('#content').html(data); 
     });       
    }); 
}); 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 

我々はしましたデータ・キーによって値にアクセスするためにjQueryの.data()機能を使用していました。

data- *属性は、一致する要素に関連付けられた任意のデータを格納するために使用されます。

Answer 2

のみデータ属性は動作しますが、データ・キーを使用する必要があります。

あなたのdocument.ready前

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 

を追加する必要があります[私はあなたが$を関数ではありません取得している願っています]。

それは同様である必要があります - （[PHPとjQueryのAjaxのPOST例]の

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
     $('a').click(function(){ 
      var pagenamevalue=$(this).data('pagename'); 
      $.get('data.php', {'page':pagenamevalue}, function(data){ 
      $('#content').html(data); 
      });       
     }); 
    }); 
    </script>