2012-04-03 10 views
4

enter image description hereJQuery/PHPを組み合わせてクリックをデータベースに記録しますか?

添付の画像は、私が構築している検索エンジンの結果ページを示しています。それぞれの返品結果について、ユーザーは結果(「食品科学」)をクリックすることができ、それはその特定の結果についての情報を明らかにするためにアコーディオンスタイルを拡張する。

ユーザーが結果をクリックして(学習/インテリジェンスの目的で)、セッションID、クエリ、結果の位置を格納するデータベーステーブルに保存するユーザーがアイテムをクリックした順序。

JQueryを使用して、私はすでにクリックされた結果のタイトルを引っ張る機能を持っていますが、私はクリックを記録する場所を設定していますが、JQueryはどうなっているのかわかりませんクライアントサイド、PHPはサーバ側です。

私のテーブルにクリックログを挿入するためにデータベースを照会できるように、JQueryを使用してPHP関数をトリガーするにはどうすればよいですか?

以下はJQuery関数です。

$(document).ready(function() { 
    $('.accordionButton').click(function(e) { 
     if($(this).next().is(':hidden') == true) { 
      $(this).addClass('on'); 
      $(this).next().slideDown('normal'); 
      $(this).next().slideDown(test_accordion); 
      // SEND CLICK ACTION TO LOG INTO THE DATABASE 
      alert($(this).find('h3:last').text()); // displays the title of the result that was just clicked 
     } 
     else { 
      $(this).removeClass('on'); 
      $(this).next().slideUp('normal'); 
      $(this).next().slideUp(test_accordion); 
     } 
    }); 
} 
+0

を、私は、httpをお勧めします:/ /www.clicktale.com – AlienWebguy

+0

興味深い。私はむしろそれを自分で構築したいと思う。データベースの設定と学習アルゴリズムが既に用意されているので、ユーザーが何をクリックしているかを確認する方法を見つけるだけです。しかし、提案していただきありがとうございます! – Jon

+0

AJAXを使用してください! http://api.jquery.com/jQuery.ajax/ –

答えて

3

少し例、クリック上:

$.post(
'count_click.php', 
{ id: "someid" }, 
function(data) { 
// data = everything the php-script prints out 
}); 

PHPの

はの順序を追跡するために、JavaScriptの変数を定義します。クリック以外のクリック数:

var order = 0; 

下部に、あなたのクリック機能にこれを追加します。

order++; 
var sessionID = $("input[name='sessionID']").val(); // assuming you have sessionID as the value of a hidden input 
var query = $("#query").text(); // if 'query' is the id of your searchbox 
var pos = $(this).index() + 1;  // might have to modify this to get correct index 
$.post("logClick.php", {sessionID:sessionID, query:query, pos:pos, order:order}); 

を「logClick.php」と呼ばれるPHPスクリプトでは(同じディレクトリ内):

<?php 
    // GET AJAX POSTED DATA 
    $str_sessionID = empty($_POST["sessionID"]) ? '' ; $_POST["sessionID"]; 
    $str_query = empty($_POST["query"]) ? '' ; $_POST["query"]; 
    $int_pos = empty($_POST["pos"]) ? 1 ; (int)$_POST["pos"]; 
    $int_order = empty($_POST["order"]) ? 1 ; (int)$_POST["order"]; 

    // CONNECT TO DATABASE 
    if ($str_sessionID && $str_query) { 
     require_once "dbconnect.php"; // include the commands used to connect to your database. Should define a variable $con as the mysql connection 

     // INSERT INTO MYSQL DATABASE TABLE CALLED 'click_logs' 
     $sql_query = "INSERT INTO click_logs (sessionID, query, pos, order) VALUES ('$str_sessionID', '$str_query', $int_pos, $int_order)"; 
     $res = mysql_query($sql_query, $con); 
     if (!$res) die('Could not connect: ' . mysql_error()); 
     else echo "Click was logged."; 
    } 
    else echo "No data found to log!"; 
?> 

あなたはコールバック関数を追加することができますの$ .post()Ajaxのメソッドの三番目のパラメータとして使用すると、エラーがスクリプトで発生したかどうかを確認したい場合:

$.post("logClick.php", {sessionID:sessionID, query:query, pos:pos, order:order}, 
    function(result) { 
     $('#result').html(result); // display script output into a div with id='result' 
     // or just alert(result); 
    }) 
); 

EDIT:あなたはpersiするための変数の値が必要な場合あなたが結果を改ページしたためにページロードの間にstを使用した場合、この変数の値をGETまたはPOSTのいずれかを使用してページ間に渡すことができます。隠し入力に値を保存し、jQueryで簡単に値を読み取ることができます。 (または、クッキーを使用することもできます)。

例(すべての結果のページでこれを置く):あなたのjQueryで

<?php 
    $order = empty($_POST["order"]) ? $_POST["order"] : "0"; 
    $html="<form id='form_session' action='' name='form_session' method='POST'> 
     <input type='hidden' name='order' value='$order'> 
    </form>\n"; 
    echo $html; 
?> 

を、ユーザがページのリンクをクリックしたときにだけ、その後var order = 0;

var order = $("input[name='order']").val(); 

を変更、デフォルトを防ぎますリンクアクションを設定し、注文値とフォームアクションを設定してから、javascript/jQueryを使用してフォームを送信してください:

$("a.next_page").click(function(event) { 
    event.preventDefault(); 
    var url = $(this).attr("href"); 
    $("input[name='order']").val(order); 
    $("#form_session").attr('action', url).submit(); 
}); 

すべての 'next'と 'previous'ページネーションリンクには同じクラス(この例では 'next_page')を指定する必要があります。

EDIT:次のようにあなたのページネーションの場合:

<div class='pagination'> 
    <ul><li><a href='page1.url'>1</a></li> 
     <li><a href='page2.url'>2</a></li> 
    </ul> 
</div> 

そしてちょうどこの変更:あなたは予算を持っており、車輪の再発明をしないことを希望する場合

$("div.pagination a").click(function(event) { 
etc. 
+0

これは完全に機能しましたが、依然として*唯一のものは間違っています。結果にはページが付けられているので、新しい検索を開始するまで、クリックオーダーを有効にしておきたい。ですから、どういうわけか私は世界的に "注文"の数を保存する必要がありますが、どうしたらよいか分かりません。何か案は? – Jon

+0

@Jon:上のコードの 'order'変数は、グローバルであることを意図しています。私は、新しいクエリがユーザによって提出されたときにリセットする必要があると思います。言い換えれば、searchbox submitボタンの 'click'イベントをキャッチするか、 'Enter'が押されたときにキャッチして、この変数をaccordionButtonのclickメソッドの外でリセットするだけです(例えば '$(document).keypress – Stefan

+0

@Jon:結果が新しいページを読み込むと、ページが再読み込みされますか?はい、上記のような注文値は失われます。解決策:1. jQueryを使用し、代わりに新しい結果でdivをロードするか、新しいページを読み込みます。 2.新しいページURLのGETパラメータを使ってorder変数を渡してから、javascriptで値を直接読み取るか、phpを使って隠れた入力に値を格納し、そこからjQueryで読み取ることができます。 – Stefan

1

jQuery AJAXを使用してPHPページにリクエストを送信します。 (それは本当に簡単です)詳細はこちらをご覧ください:

http://api.jquery.com/jQuery.ajax/

をこの特定のケースでは、あなたが何かを返す必要がないので、それだけでPOSTを使用するか、jQueryの中でメソッドをGETする方が良い場合があります。

http://api.jquery.com/jQuery.post/ http://api.jquery.com/jQuery.get/

のような何か:

$.ajax({ 
  type: "POST", 
  url: "some.php", 
  data: "name=John&location=Boston" 
    success: function(data){ 
    alert('done'); 
}); 
+0

パーフェクト!これは多くの意味があります。ありがとうございました! – Jon

1

これは簡単ですが、検索ページから送信されるAJAXリクエストを処理するためのPHPスクリプトが必要です。

スクリプトにAJAXリクエストを作成するには、検索ページで.ajaxを追加する必要があります。 PHPスクリプトではデータベース操作を処理し、GETまたはPOSTデータを使用してスクリプトにAjaxのIDを与えます。

1

Ajaxを使用してください。クリックをデータベースに書き込むシンプルなPHPスクリプトを作成します。どのようにデータベースのクリックを正確に記録するのか分かりませんが、クリックしたアイテムの一意の識別子は、POST変数などを使って、ajaxを使ってPHPスクリプトに送信することができます。あなたが(未テスト)このような何かを行うことができます

if (isset($_POST['id'])) { 
// add a click in the database with this id 
} 
関連する問題