3

PHP/MySQL を使用した大規模な Web サイトを所有しており、それに Netflix スタイルのツールチップを追加したいと考えています。

私がやりたいことは次のとおりです。

  1. ユーザーがリンクをクリックする
  2. AJAX を使用して外部ファイルに渡される変数
  3. 外部ファイルは変数を使用して MySQL データベースを照会します
  4. クエリ結果がツールチップに表示される

しわは、ページのリンクの種類が複数あることです。1 つのテーブルを選択する人もいれば、他のテーブルを選択する人もいます。

これを作成する方法を学ぶために使用できるチュートリアルをオンラインで知っている人はいますか?

4

1 に答える 1

3

わかりました、あなたは自分のステップを明確に計画しました。私はここにあなたのポイントに基づいてブログ投稿を書きました. これは、「Netflix」ツールチップにより具体的にするために、わずかな追加を加えたその投稿の内容です。

ユーザーがリンクをクリックする

したがって、最初に必要なのは、実際のリンクではなく ajax リクエストを作成するようにリンクに指示するフロント エンド コードです。jQuery を使用して面倒な作業を行うことをお勧めします。そのため、まだ jQuery スクリプトをページに含めていない場合は、まずこの行を HTML ファイルの先頭に追加する必要があります。

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

次に、リンクにクラスを与える必要があります。たとえば、リンクは次のようになります。

<a href="ajax.php?var=value" class="ajax_link">Link</a>

データを提供する ajax ページへのリンクが表示されます。GET を介して var という名前の変数をそのページに渡します。これについては後で説明します。クラスも「ajax_link」に設定されていますjQuery からリンクを参照するために使用します。

ここで、リンクを処理するために jQuery を作成する必要があります。これを行うには、本文の最後でタグを開き<script language="javascript">、次の行に沿ってコードを配置する必要があります。

$(".ajax_link").click(function(e) {

    e.preventDefault(); //Stops link from changing the page

    var link = $(this).attr('href'); //Gets link url

    $.ajax({ //Make the ajax request
      url: link,
      cache: false
    }).done(function( html ) { //On complete run tooltip code

        //Display tooltip code goes here, returned text is variable html

    });
});

ツールチップ コードについては後で説明します。

AJAX を使用して外部ファイルに渡される変数

次に、PHP ファイル ajax.php を作成する必要があります。このファイルは、データベースに接続し、必要なクエリを作成する必要があります。まず、ファイルを開始し、GET から変数を取得します。以下のコードを参照してください。

<?php

$var = $_GET['var'];

これにより、変数 $var が作成され、上記の HTML リンクで設定された値「value」が含まれます。インジェクションから身を守るために何らかの検証を行い、値をエスケープしたいと思うかもしれませんが、ここでは説明しません。

外部ファイルは変数を使用して MySQL データベースを照会します

次に、データベースに接続してクエリを実行し、返されたものをエコーし​​ます。これは、「data_table」と呼ばれるテーブルから列「information」の値を返すためのコードです。ここで、ある値は $var と等しくなります。

//connection to the database
$dbhandle = mysql_connect($hostname, $username, $password) 
  or die("Unable to connect to MySQL");

//select a database to work with
$selected = mysql_select_db("examples",$dbhandle) 
  or die("Could not select examples");

//execute the SQL query and return records
$result = mysql_query("SELECT information FROM data_table WHERE value='$var'");
//fetch tha data from the database
while ($row = mysql_fetch_array($result)) {
   echo $row{'information'};
}

//close the connection
mysql_close($dbhandle);

データベースのクエリの詳細については、このチュートリアルを参照してください。

ツールチップを Netflix のスタイルで表示するので、ツールチップに含めたいさまざまなデータがたくさんあると思います。上記のコードを適応させ、渡された「var」に基づいて必要なすべての情報を引き出すことができることを願っています。もちろん、複数の var を渡すことができます ( example ) ajax.php?var1=value1&var2=value2。そして、PHP$var1 = $_GET['var1']; $var2 = $_GET['var2'];などで取得します。

次に、この PHP ページのツールチップ内に表示される HTML をフォーマットして、AJAX 要求がツールチップに表示される有効な HTML を返すようにする必要がありますが、ここでは説明しません。

クエリ結果がツールチップに表示される

これらの両方のページを設定すると、最初のページが ajax ページに何らかの値を送信し、ajax ページはデータベースから対応する情報をエコーし​​、最初のページが JavaScript 変数で受け取りますhtml。

これの最終段階は、返されたテキストをツールチップとして表示することです。最初に、ページが機能していることをテストすることをお勧めします。これを行う簡単な方法の 1 つは、返された情報を含むアラートを表示することです (コンソールにログインすることもできます)。これを行うには、次のように ajax .done 関数にコードを追加します。

.done(function( html ) { 

    alert("text: " + html);

});

これが完了したら、ページを開いてリンクをクリックすると、必要なテキストを示す警告ボックスがポップアップ表示されます。アラートの 'text:' の後に何も表示されない場合は、何か問題が発生しており、コードが正しいことを確認してください。成功した場合は、ツールチップの表示に進みます。

多くの利用可能な jQuery ツールチップ プラグインがあり、そのうちの 1 つはqTipと呼ばれます。これにより、ツールチップを作成し、クリックしたときに表示できます。ツールチップ用の JavaScript ファイルと関連する CSS をダウンロードし、コードを .done 関数に追加してツールチップを作成および表示する必要があります。

ページの場所に qTip を追加するには、qTip サイトにアクセスし、最新バージョンの js と css をダウンロードします。次に、次のように head 内のファイルを参照する必要があります。

<link type="text/css" rel="stylesheet" href="jquery.qtip.min.css" />

そしてjsは次のようになります：

<script type="text/javascript" src="jquery.qtip.min.js"></script>

これは、css および js ファイルがインデックス ページと同じフォルダーにあることを前提としています。そうでない場合は、これらのファイルを配置した場所を指すようにこれらのリンクを修正してください。

.done 関数に追加する必要があるのは、次のとおりです。

$(this).qtip({
    content: {
        text: html
    }
});
$(this).qtip('toggle', true);

このコードは、AJAX リクエストから返されたものを含む qTip を作成します。Netflix のツールチップに似たツールチップを表示しているため、ページはツールチップ内にレンダリングされる HTML を返す必要があります。次に、ツールチップが作成されると、一度クリックすると最初にツールチップが表示されるように切り替わります。次に、ホバーをオン/オフすると、ツールチップが表示/非表示になります。

qTip のスタイリングの詳細については、Web サイトを参照してください。

于 2012-09-11T09:39:30.707 に答える