JQuery MySQLのデータをフェッチして変数に格納

Question

私はマルチステージのブートストラップフォームで作業を続けています。私はDBから情報を引き出そうとするロードブロッキングを打ちました。

1. データはMySQLデータベースから取得する必要があります。

   のメインページには、私は、以下の機能要件を持っているPHPで、

   quote_tool.php命名されます。

2. ユーザーはリクエストしたデータのみを受信する必要があります（つまり、ユーザーライセンスについての情報を含む行は、ユーザーがフォームにユーザーライセンスを含めるためにラジオボタンをオンにした場合にのみ取得する必要があります）。
3. ページをリフレッシュ/リロードせずに情報をDBから呼び出す必要があります。

現在、私は次の列と私のDB内のテーブルを持っている：

3種類の製品が今、そのテーブルにあります。ユーザーはエンドポイントを含めることを希望するラジオを選択し、エンドポイントを含めるための量を入力できるように3つのチェックボックスがあります。

は、入力フィールドには、次のようになります。

<input type="text" readonly name="sum-9102-qty" class="summary-field sum-qty" id="sum-9102-qty"> 

：ユーザーはこの値を動的に次のフィールドに同様概要ページに更新され、ボックスと入力値をチェック

<label for="device-9102" class="form-partner-label"><input type="checkbox" class="quote-chkbox" id="9102-chk"> 9102 IP Phone</label> 
<input type="text" name="9102-quantity" class="form-endpoint-qty form-control" id="form-partner-9102" readonly value="0"> 

この製品に関する概要ページには、2つのフィールドがあります。

• MSRP
• 型番

MSRPは、追加の計算に使用される隠しフィールドですが、部品番号が概要ページに表示されています。

ユーザがエンドポイント数量の値を入力すると、DBを呼び出して、MSRPと部品番号をrefEndpointsテーブルから取得する必要があります。

は、私は現在、ユーザーがフォーム上の「次へ」ボタンを押した時にDBを呼び出すための関数を構築しています、それは次のようになります。

//Call DB to fetch part number and msrp of 9102 
    $('#form-partner-9102').change(function()){ 
     var quantity_9102 = $('#form-partner-9102').val(); 
     if(quantity_9102 !== 0) { 

     } 
    }); 

これは私がで立ち往生していますポイントです。私はどのようにDBを呼び出すと、サマリーページの正しい入力フィールドに部品番号とMSRPの値を配置するか分からない。

Answer 1

jQueryはクライアント側で実行されるため、直接MySQLに接続することはできませんが、質問にはサーバ側で実行されるタグphpが付いているため、データベースに接続できます。まず、HTTP POST要求に応答してJSONを返すPHPファイルをセットアップする必要があります。Returning JSON from PHP to JavaScript?

設定したら（このPHPファイルがどのようなパラメータを取り入れ、どのようにこれをクエリに変換して応答できるようにする必要がありますか）、あなたはこれを行う方法を示す素晴らしい答えです。このPHPファイルを呼び出す簡単なJavaScriptを設定できます（query.phpと呼ぶことができます）。これは次のようになりますんコード：心に留めておくべき

$.post('/query.php', {quantity: $('#form-partner-9102').val()}, function(resp) { 
    $('#PartNumber').html(resp.PartNumber); 
}); 

いくつかの重要なことは、常にユーザーの入力を取り、（クエリにそれを回すときだけSELECTステートメントを構築しませんprepared statementsを使用してくださいになっていますby joining strings）。また、イベントバインディングを確認してください。おそらく、パートナーIDをdata-* attributeとする入力用の汎用ハンドラを作成して、コードを小さくして保守しやすくすることができます。