あなたの論理は間違っています、あなたは概念を混ぜています:
- サーバー側: PHP、MySQL
- クライアント側: HTML、CSS、JS
PHP はこの方法ではブラウザーと対話できません。フローは次のとおりです。
- ブラウザは、ページを表示するためにサーバーにリクエストを送信します
- サーバーは PHP にいくつかの情報を渡します
- PHP は独自の処理を行い、出力としてテキストを生成します (通常は HTML)。
- テキストはブラウザーによって HTML として解釈され、ページがレンダリングされます。
- ブラウザは JS コードを実行し、それが意味することは何でもします
- 繰り返す
これを念頭に置いてコードを構成する必要があります: X
PHPができる前にブラウザが行う必要がありY
ますか? 次に、PHP をチェックする必要がありif (browser did X) { ... do Y ... } else { tell browser "Do X" }
ます。
ブラウザが実行中で、サーバーからの情報が必要な場合は、クエリX
を使用して新しい URL をロードすると、その情報が取得される可能性があります。明らかに、そのクエリに応答するには、新しい PHP スクリプトが必要です。
第二部
ロジックをステップに分割します。
- DB から必要な情報を準備し、PHP を使用して HTML を構築し、必要に応じて JS 値を追加し、ページをブラウザーに送信します。
- 次に必要な情報をブラウザーが判断できるようにし、ユーザーが現在のページを離れてはならないが、ブラウザーがさらに DB 情報を必要とする場合は、非同期AJAX要求を送信します。
- AJAX リクエストに応答する新しい PHP スクリプトを準備し、必要なものを確認し、可能であればJSON
json_encode()
で情報を返す ( ) ブラウザでのプロセスを簡素化する
- 引き続きブラウザーで、JS は AJAX 応答を受け取り、それを解析して、いくつかのアクションを実行します。
- アプリ/スクリプトのロジックによっては、ユーザーのアクションに基づいて、サーバーで再度送信するためにより多くの情報を準備する必要がある場合があります
アイデアの実装
やりたいことを達成するためのさまざまな戦略があります。簡単なものもあれば、難しいものもあります。選択するものは、コードやアイデアの残りの部分にどのように適合するかによって異なります。
あなたの説明から:
- ブラウザには値が保存されています
- PHPには上記の値が必要です
- DB は一致のリストを取得します
- ブラウザはこれらの一致を表示します
そう:
- ユーザーは最初にページにアクセスする必要があります。この時点では、ページには
Reenactors
リストが表示されていませんが、リストを処理していることを示すメッセージが表示される場合があります。
- ページが読み込まれると、小さなスクリプトが
join_affiliation
値を取得し、AJAX リクエストを次のようなスクリプトに送信します。reenactors.php?affiliation=<join_affiliation>
- その間、ユーザーは糸車を見る
- AJAX リクエストは以下を返します。
- エラー: ユーザーへのメッセージ「アフィリエーションの再現者が見つかりません」
- 成功: リストを作成するか、リストを追加します (PHP スクリプトの応答によって異なります)。
重要:mysql_*
関数ファミリーは廃止されました。その使用はお勧めできません。その低レベルの制御により、熟練していないコーダーのコードから悪意のあるクエリが簡単に実行される可能性があるためです。PDOの使用をお勧めします。
再演者リスト:
/**
* By now, assume no errors when connecting to the DB
*/
$db = new PDO('mysql:host=localhost;dbname=<SOMEDB>','<USERNAME>','PASSWORD');
$affiliation = '<any>';
if (isset($_GET['affiliation'])) {
$affiliation = $_GET['affiliation'];
/**
* Dynamic values are indicated by the question mark
* Named variables are also possible:
* http://www.php.net/manual/en/pdostatement.bindparam.php
*
* No quotes around the placeholder of the string
*/
$statement = $db->prepare('SELECT * FROM Reenactors WHERE Affiliation=?');
$statement->bindValue(1,$affiliation);
}
else {
$statement = $db->prepare('SELECT * FROM Reenactors');
}
/**
* The query statement is ready, but hasn't executed yet
* Retrieve/fetch all results once executed
* http://www.php.net/manual/en/pdostatement.fetchall.php
*
* Some prefer to read row by row using fetch()
* Use it if the script starts to use too much memory
*/
$statement->execute();
$reenactors = $statement->fetchAll(PDO::FETCH_ASSOC);
/**
* Display the affiliation, as part of the table
* Assume the table will have 5 columns
*/
?>
<tr>
<th colspan="5">Affiliation: <?php echo htmlspecialchars($affiliation) ?></th>
</tr>
<?php
/**
* Display the list
* Assume the text can contain HTML and escape it
* http://www.php.net/manual/en/function.htmlspecialchars.php
*/
foreach ($reenactors as $reenactor) { ?>
<tr>
<td><?php echo htmlspecialchars($reenactor['ID']) ?></td>
<td><?php echo htmlspecialchars($reenactor['Side']) ?></td>
<td><?php echo htmlspecialchars($reenactor['Role']) ?></td>
<td><?php echo htmlspecialchars($reenactor['First_Name']) ?></td>
<td><?php echo htmlspecialchars($reenactor['Last_Name']) ?></td>
</tr>
<?php }
/**
* What if, for some reason, the list is empty?
*/
if (!count($reenactors)) { ?>
<tr>
<td>
This list is empty
</td>
</tr>
<?php }
再演者のリストを動的に表示 ( jQueryの使用を想定)
<html>
<head>
<title>Reenactors of Historic Place Historic Event</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/**
* Wait until the document is ready
*/
$(document).ready(function(){
/**
* Be warned, not all the browsers support localStorage
* This line might cause an error at those browsers
*/
var affiliation = localStorage.getItem('join_affiliation') || '';
/**
* jQuery.ajax http://api.jquery.com/jQuery.ajax/
* affiliation needs to be encoded to be added to the URL
*
* The request will start at this moment, and finish at an
* undefined moment in the future
*
* success or error function will execute at that moment
*/
$.ajax({
url: 'reenactors.php?affiliation=' + encodeURIComponent(affiliation),
error: function(){
/**
* In case of error, find the table and show a message
*/
$('#reenactors-list td').text('There was a problem generating the list, please try later');
},
success: function(data_from_server){
/**
* data_from_server will contain the list generated by the script
*/
$('#reenactors-list tbody').html(data_from_server);
}
});
});
</script>
</head>
<body>
<h1>Reenactors</h1>
<table id="reenactors-list">
<tbody>
<tr>
<td>
The list of reenactors is loading, please wait... [spinning image here]
</td>
</tr>
</tbody>
</table>
</body>
</html>