ajaxでgetリクエスト。受け取ったデータを表示する

こんな画面で・・・

f:id:sho322:20150205013907j:plain

リンクをクリックしたら、GETリクエストを飛ばして、画面遷移なしに受け取ったデータを表示する

f:id:sho322:20150205013912j:plain

リクエストを受ける側のPHPはこちら。

you select for the <?php echo $_GET["select"]; ?>

表示する側のソースコードはこちら。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function() {
  $('#selector a').on('click', function(e) {
    e.preventDefault();
    var queryString = 'select=' + event.target.id;
    $.get('select.php',queryString, function(data) {
      $('#result').html(data);
    });
  });
});

</script>
</head>
<body>

<section id="selector">
  <h2>好きな色を選んでください</h2>
  <a href="sample.php?select=gray" id="gray">gray</a>
  <a href="sample.php?select=red" id="red">red</a>
  <a href="sample.php?select=blue" id="blue">blue</a>
  <p id="result"></p>
</section>
</body>
</html>