Ajaxを使って、データを配列として送信、受信する事が出来ます。

ここではチェックボックスをチェックするたびに、Ajaxでデータを送信して受信する

流れを紹介したいと思います。

流れとしては

1. チェックボックスをチェックする
2. チェックしたら「CheckValue(n)」というfunctionが実行され、チェックされた値を取得する
3. チェックされた値は「ajax」を利用して、「ajax.php」に渡す
4. 「ajax.php」には自分のシステムに応じて、取得したデータを元に、データベースからデータを取得する
5. 取得したデータは「index.php」の「content_hover」というクラスがついている「div」の中に表示される

　　※結果をどこに表示するのかは「javascript の success: function(html)の所」に指定できる

index.php

index.php

function CheckValue(n){ num = 0; //ﾁｪｯｸされている項目数 value_array = new Array(); if(n==1){ //checkboxのname属性がすべて同じ場合 for(i=0 ; i<document.form1.styling.length ; i++){ if(document.form1.styling[i].checked) { value_array.push(document.form1.styling[i].value); num++; } } } $.ajax ({ type: "GET", url: "ajax.php", data: {"str1" : value_array[0], 　　 "str2" : value_array[1], cache: false, success: function(html) { $(".content_hover").html(html); } }); } </script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

function CheckValue(n){   num = 0; //ﾁｪｯｸされている項目数   value_array = new Array();      if(n==1){    //checkboxのname属性がすべて同じ場合 for(i=0 ; i<document.form1.styling.length ; i++){   if(document.form1.styling[i].checked) {   value_array.push(document.form1.styling[i].value); num++;   } }   } $.ajax ({ type: "GET", url: "ajax.php", data: {"str1" : value_array[0], 　　  "str2" : value_array[1], cache: false, success: function(html) { $(".content_hover").html(html); } });    }   </script>

index.php

<form name="form1" action="index.php" class="styling"> <input type="checkbox" name="styling" value="男性" onClick="CheckValue(1);"> <input type="checkbox" name="styling" value="女性" onClick="CheckValue(1);"> </form>

1 2 3 4

<form name="form1" action="index.php" class="styling"> <input type="checkbox" name="styling" value="男性" onClick="CheckValue(1);"> <input type="checkbox" name="styling" value="女性" onClick="CheckValue(1);"> </form>

ajax.php

ajax.php

<?php if($_GET['str1']){ $data1 =$_GET['str1']; } if($_GET['str2']){ $data2 =$_GET['str2']; } //取得したデータを元にデータベースから必要なデータを取得する ...... ?>

1 2 3 4 5 6 7 8 9 10 11 12

<?php if($_GET['str1']){      $data1 =$_GET['str1']; } if($_GET['str2']){ $data2 =$_GET['str2']; }   //取得したデータを元にデータベースから必要なデータを取得する   ...... ?>

取得した内容はindex.phpの「content_hover」というクラス名のdivの中に表示されます。

index.php

<div class="content_hover"> //ここに結果が表示されます。 //データベースから取得したデータをココに表示する。 ...... ...... </div>

1 2 3 4 5 6 7

<div class="content_hover"> //ここに結果が表示されます。   //データベースから取得したデータをココに表示する。 ...... ...... </div>