field1 と field2 を持つテーブル (SQL Server 2008) があります。チェックボックスmyCheckBoxが<label id="priceLabel" />オンの場合、値は field1 の値を使用し、オフの場合、ラベルは field2 の値を使用します。
私は AJAX をよく理解していないので、他のすべてのコンポーネントの値をリセットすることなく、ラベルの値を変更する際に JavaScript を使用する必要があると考えています。データベースへの接続にjavascriptを使用すべきではないことを読みましたが、他の方法はわかりません..
誰かがこの状況で何をすべきか教えてもらえますか?
これがどのように機能するかの大まかな図は次のとおりです。
ユーザーのワークステーション | サーバー
| |
+-------------+ | +-------------+ +-------------+
| | ブラウザ | | | | | PHP | | | | |
+-------------+ | +-------------+ | データベース |
| | JavaScript |<---------->| PHP コード |<--->| | |
| | コード | アヤックス | | | DBと話す | | | | |
+-------------+ | +-------------+ +-------------+
したがって、JavaScript コードは ajax を使用して PHP コードと対話します。PHP コードは DB と通信します。たとえインフラストラクチャをセットアップしたとしても、ブラウザー上の JavaScript を使用して DB と直接対話することは絶対にしないでください。もちろん、JavaScript はエンド ユーザーのブラウザー上で実行されているため、アクセス許可が制限されている必要があります。DB を外部から保護する必要があります。
それが PHP コードの機能です。ゲートキーパーとデータ トランスフォーマーの両方です。DB からデータを取得し、クライアントで役立つ形式 (通常は HTML、テキスト、JSON、または XML) に変換し、それをブラウザーの JavaScript コードに渡します。ブラウザーはその HTML を使用します。テキスト、JSON、または XML を使用して、ユーザーなどに何かを表示します。
それらを（わずかに）より詳細に見てみましょう：
JavaScript Ajax リクエスト
JavaScript を使用して ajax リクエストを送信するのは非常に簡単です。適切なライブラリを使用してブラウザの不一致を回避する場合は特にそうです。基本的には、次のようになります。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleReadyStateChange;
xhr.open("GET", "your_php_file.php");
xhr.send();
function handleReadyStateChange() {
if (xhr.readyState === 4 && (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300))) {
// ===> This is where we can use the resulting information <===
}
}
詳しく見てみましょう。
// Create the request object
var xhr = new XMLHttpRequest();
// Set up a callback for when things happen
xhr.onreadystatechange = handleReadyStateChange;
// Open the request
xhr.open("GET", "your_php_file.php");
// ^ ^----------------------- a normal URL like any other
// |------------------------------ the kind of request (GET, POST, ...)
// Send it (if this were a POST, you'd include data as an
// argument to `sent`, typically as a URI-encoded string
xhr.send();
// IMPORTANT: As of this point in the code, the request has been
// *sent*, but it has not yet *completed*. By default, ajax is
// *asynchronous*.
// Our callback for ready state changes
function handleReadyStateChange() {
// Is the request complete?
if (xhr.readyState === 4) { // 4 = complete
// Yes, did it succeed? (`status` is a standard HTTP status code
// except that *some* browsers sometimes use 0 if the response came
// from cache)
if (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300)) {
// If the Content-Type header of the HTTP response was for XML,
// the XML document is on `xhr.responseXML`.
// Otherwise, the HTML, text, or JSON is on `xhr.responseText`
// ===> This is where we can use the resulting information <===
}
}
}
PHP コード
ajax リクエストは、PHP コードに対する他のページ リクエストと同じように見えます。(必要に応じてそれらを区別することは可能ですが、そうする必要があることはまれです)。したがって、PHP コードは、作成する他の PHP コードとまったく同じです。ただし、おそらく異なる出力になります。ブラウザ用の完全な HTML ページをレンダリングする PHP の「ページ」に慣れています。ただし、ajax リクエストに応答するときは、ページ全体を送り返すのではなく、ページ上のコードが使用する情報を送り返します。
これは PHP がどのように見えるかの 1 つの例ですが、繰り返しますが、これはあなたが書く他の PHP とまったく同じなので、何でもかまいません:
<?php
// In our case, we'll return plain text from our example, so
// mark the response accordingly
header("Content-Type", "text/plain");
// We might use $_GET or $_POST variables here, to get
// information from the request
// Once we've authenticated that the request comes from
// an authorised user, we might connect to the database
// and retrieve some information here
// Output our response
echo("Hi there");
?>
そこでプレーンテキストを返します。繰り返しますが、多くのものを返すことができます。JSON は、データをページに返す場合によく使用されます。PHP 側では、データをメモリ構造 (配列など) に構築し、それを文字列に変換してechovia で使用しjson_encodeます。JSON.parseJavaScript 側では、最新のブラウザーでその JSON を解析します。(古いブラウザーの場合は、JSON パーサーをページに追加する必要があります。これが、jQuery などの適切なライブラリーを提供するもう 1 つの理由です。)
HTML と JavaScript 側の完全な例を次に示します。ソース
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Ajax Example</title>
<style>
#theSpan {
border: 1px solid grey;
padding: 2px;
}
</style>
</head>
<body>
<input type="button" id="theButton" value="Click Me">
<p>Here is the span we'll fill in: <span id="theSpan"></span></p>
<script>
(function() {
// Hook up our button click handler
document.getElementById("theButton").onclick = function() {
// Do our ajax request
// Create the request object
var xhr = new XMLHttpRequest();
// Set up a callback for when things happen
xhr.onreadystatechange = handleReadyStateChange;
// Open the request
xhr.open("GET", "/uvanep/1");
// ^ ^----------------------- a normal URL like any other
// |------------------------------ the kind of request (GET, POST, ...)
// Send it (if this were a POST, you'd include data as an
// argument to `sent`, typically as a URI-encoded string
xhr.send();
// IMPORTANT: As of this point in the code, the request has been
// *sent*, but it has not yet *completed*. By default, ajax is
// *asynchronous*.
// Our callback for ready state changes
function handleReadyStateChange() {
// Is the request complete?
if (xhr.readyState === 4) { // 4 = complete
// Yes, did it succeed? (`status` is a standard HTTP status code
// except that *some* browsers sometimes use 0 if the response came
// from cache)
if (xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300)) {
// If the Content-Type header of the HTTP response was for XML,
// the XML document is on `xhr.responseXML`.
// Otherwise, the HTML, text, or JSON is on `xhr.responseText`
// ===> This is where we can use the resulting information <===
// In this case, let's put it in our span:
document.getElementById("theSpan").appendChild(
document.createTextNode(xhr.responseText)
);
}
}
}
};
})();
</script>
</body>
</html>
その場合、呼び出しているページは text を返すだけです"Hi there"。
あまりクレイジーなものが必要ない場合
は、単純に 2 つのフィールドをプリロードし、ビューで値にアクセスできるようにし、JavaScript で値を切り替えることができます。
<?php
$label1 = 'field1_value'; //get this value from the DB
$label2 = 'field2_value';
?>
<html>
<input type="checkbox" id="myCheckBox" onclick="changeValue();" />
<label id="priceLabel" ><?php echo $label1; ?><label>
<script type="text/javascript">
function changeValue(){
var check = document.getElementById('myCheckBox');
var label = document.getElementById('priceLabel');
if(check.checked){
label.innerHTML = "<?php echo $label2; ?>";
}else{
label.innerHTML = "<?php echo $label2; ?>";
}
}
</script>
<html>
ここで概念を示すだけで、もっとうまくできるかもしれません。