speedup loading SQLデータベースのオプションを選択

Question

私はいくつかの入力と4つの選択がある項目を追加しています。レコードの追加/編集ボタンをクリックするたびに、フォームはすべての値でロードされます記入します。私はロードオプションを高速にSQLデータベースからオプションを選択する方法がある場合は疑問に思っていますか？（クエリキャッシングや他の方法がわからないなど）

JS：

loadSelectOptions("tab1"); //1600 options 
loadSelectOptions("tab2"); //1200 
loadSelectOptions("tab3"); //400 
loadSelectOptions("tab4"); //100 

function loadSelectOptions(elmId) { 
    $.post( 
     "queries.php", 
     {getValues:elmId}, 
     function(data) { 
      $("#"+elmId).empty(); 
      for (var i = 0, len = data.length; i < len; i++) { 
       $("#"+elmId).append(data[i]); 
      }; 
      $("#"+elmId).selectpicker("refresh"); 
     }, 
     "json" 
    ); 
} 

PHP（queries.php）：これは私が選択したオプションをロードするために使用するメカニズムの一例である

if (isset($_POST["getValues"]) && (in_array($_POST["getValues"], array("tab1","tab2","tab3","tab4")))) { 
    $table = $_POST["getValues"]; 
    $sql = "SELECT id, name FROM {$table} WHERE active='Y' ORDER BY name"; 
    $result = mysqli_query($con, $sql); 
    $selectValues = array(); 
    $selectValues[] = "<option value=0> [Select a value] </option>"; 
    while ($row = mysqli_fetch_array($result)) { 
     $selectValues[] = "<option value='".$row["id"]."'>".$row["name"]."</option>"; 
    } 
    echo json_encode($selectValues); 
} 

私は簡素化することができますか教えてくださいこのメカニズム。私はまた、データベースに新しい選択オプションを追加するための別のフォームを持っています（管理者用）ので、オプションリストをリフレッシュするタイミングを認識できるはずです（変更されたリストやキャッシングメカニズムのフラグなど）。 JS配列にロードして後で読むなど、この問題を解決するためのいくつかのドラフト・アイデアがありますが、これをもっと複雑にする必要はありません。

Answer 1

あなたの例には、改善することができるものがたくさんありますが、まず簡単な概要を説明します。

1）大規模データを扱うこと

2を設定したときに一般的に選択ボックスが最適なUIの選択ではありません）JSONエンコードおよびデコードhtmlのあなたは、PHPスクリプトからのもののようなJSONをしているとして、遅い/非効率的ですすべてのHTMLと引用文字をエスケープします。

3）結果を返すための配列を作成してからHTMLクライアント側を作成するのではなく、ページを読み込んでいるクライアントのタイプに応じて、通常はHTML文字列サーバー側を作成するほうが高速です。 （これは幾分議論の余地のある話題で、htmlサーバとクライアント側をレンダリングするので、自分の立場を決めることができます）。

解決するには、データを動的にフィルタすることができる検索ボックスなどの代替手段を見つけることをおすすめします（データセットと読み込み時間を減らす）。

2を解決するには、jsonがhtmlをエンコードしないようにしてください。スクリプトを直接HTMLに出力し、そのテキスト応答をクライアント上でhtmlとして使用してください。また、これはあなたが次のことを行うには、あなたのphpを変更することができます。3.

を解決します。その後、

echo "<option value='0'>[Select a Value]</option>"; 
while ($row = mysqli_fetch_array($result)) { 
    echo "<option value='".$row["id"]."'>".$row["name"]."</option>"; 
} 

そしてへのあなたのjavascriptを変更：確かのContent-Type応答ヘッダことを確認してください

$.post( 
    "queries.php", 
    {getValues:elmId}, 
    function(data) { 
     $("#"+elmId).empty(); 
     $("#"+elmId).html(data); 
     $("#"+elmId).selectpicker("refresh"); 
    } 
); 

あなたのPHPスクリプトがtext/htmlであるかjqueryのajax呼び出しがjsonと解釈しようとする可能性があります。text/htmlですので、デフォルトではapplication/jsonに設定していても構いません。

さらに、従来のHTTP RESTのプラクティスに従う場合はPOSTリクエストではなく、GETリクエストをこのコンテキストで使用する方がよいでしょう。これについてはオンラインで詳しく読むことができます。

他の解決策は、擬似html文字列ではなく、データのみを返すようにすることです。

たとえば、あなたのPHPは

$options = array(); 
while ($row = mysqli_fetch_array($result)) { 
    array_push($options, array('id' => $row['id'], 'name' => $row['name'])); 
} 

echo json_encode($options); 

なる可能性がある。そして、あなたのJavascriptを

$.post( 
    "queries.php", 
    {getValues:elmId}, 
    function(data) { 
     $("#"+elmId).empty(); 
     for (var i = 0, len = data.length; i < len; i++) { 
      var option = data[i]; 
      var html = "<option value='"+option.id+"'>"+option.name+"</option>"; 
      $("#"+elmId).append(html); 
     }; 
     $("#"+elmId).selectpicker("refresh"); 
    }, 
    "json" 
); 

最初のオプションは、ネットワーク・パフォーマンス・A、スクリプトの実行速度を（HTMLにJSONエンコードを排除）増加しますなる可能性があります（レスポンスから不要なjsonの書式を取り除く）、クライアントのパフォーマンス（htmlを直接取得し、配列にループを張ることはありません。

2番目のオプションは、ネットワークのパフォーマンスを向上させますが、クライアントでもうまく機能しません。両方を試し、どちらがうまくいくかを確認することをおすすめします。