JavaScriptを使用して、HTMLドロップダウンメニューで選択されているオプションを特定し、SQLクエリを実行するPHP関数を返す

Question

更新：すべての迅速な対応に感謝します。すでにJQueryにウィジェットに機能を提供していることが明らかになっているはずです。しかし、ウェブ開発におけるHTML、Javascript、PHPの関係をよりよく理解することは有益です。

私は一緒にデータベースを照会し、いくつかの事前書かれたMySQLのクエリを返すWebページ置くしようとしています

：

function someQuery($connection) { 

$query = "SELECT DISTINCT Column1, Column2 
       FROM TABLE1, TABLE2 
       WHERE TABLE1.Colum1_ID = TABLE2.Colum1_ID"; 

     if (!($result = @ mysql_query ($query, $connection))) 
      showerror(); 

     if (@ mysql_num_rows($result) != 0) { 
      echo "\n<table border=1 width=100%>"; 

      echo "\n<tr>" . 
       "\n\t<th>Column1</th>" . 
       "\n\t<th>Column2</th>" . 
       "\n</tr>"; 

      while($row = @ mysql_fetch_array($result)) { 

       echo "\n<tr>" . 
        "\n\t<td>{$row["Column1"]}</td>" . 
        "\n\t<td>{$row["Column2"]}</td>"; 

      } 
      echo "\n</table>"; 
     } 

その後、私が持っているウィジェット：私のようなクエリの一握りを持って

を

<li class="widget"> 
     <div class="widget-top"> 
      <h3>Query Category</h3> 
      <select> 
      <option value="1">Query of Interest 1</option> 
      <option value="2">Query of Interest 2</option> 
      <option value="3">Query of Interest 3</option> 
      <option value="4"Query of Interest 4</option> 
      </select> 
     </div> 
     <div class="widget-content"> 
      <p><? 

      ****Would Run Query here ****, but want to check the selections above and run query associated with selected option. 

       ?></p> 
     </div> 
    </li> 

私の質問は、ユーザーがinteresのクエリの1つを選択できるように設定する方法ですtをドロップダウンメニューから選択して、関連するPHP関数を実行し、ユーザが選択したクエリ結果を表示します。

私は多くの検索をしてきましたが、私はここで何をしようとしているかはわかりませんが、これはむしろ日常的な機能だと感じています。

Answer 1

これを行う最も簡単な方法は、SELECTフォーム要素からonChangeイベントを使用することです。イベントが発生すると、AJAX関数を呼び出して、DIVタグを（サーバー側のスクリプトを実行して）入力することができます。

以下のサンプルでは、​​jQueryの使用を前提としています。

はその後DIVタグを移入するためにjqueryのスクリプトを追加するには、select要素にID

<select id="myselect"> 
    <option value="1">query 1</option> 
    <option value="2">query 2</option> 
    <option value="3">query 3</option> 
</select> 

を与えます。その値は

2を変更したときに

$('#myselect').change(function() { 
    $('.widget-content').load('runquery.php?id='+this.options[this.selectedIndex].value); 
}); 

Answer 2

これはPHPを使用することはできません。ドロップダウンボックスで項目を選択する操作は、クライアント側でしか行えないためです。

あなたはJavaScriptを（私はjQueryのを使用することをお勧めします）でこれを行うことができます：

$('.widget-top select').change(function() { 
    var payload = {'index': this.options[this.selectedIndex].value}; 
    $.post('runQuery.php', payload, function(response) { 
     //notify user that query ran 
    }); 
}); 

Answer 3

1）JavaScriptコードは、選択したクエリ

を含むサーバー上のURLにAJAX要求を行うこと）いくつかのJavaScriptコードを実行するために選択入力にイベントリスナーをアタッチ

3クエリが

4を結果に）サーバー上のPHPスクリプトが）応答AJAX要求の成功ハンドラは結果を受け取り、どこか

ページに挿入します0

PHP関数にJavaScriptを添付するだけでは、構築する必要のあるブラウザとサーバーの間で通信をやりとりすることはできません。

Answer 4

クライアント側とサーバー側の2つの部分をリンクする必要があります。

1. 通常、Ajax-Freeソリューションを使用するのは、一部のブラウザまたはユーザーがJavaScriptを無効にしている可能性があるためです。

2. 次は、HTTP（GETまたはPOST）リクエストに基づいて応答を返すPHPページを作成することです。リクエストを取得するには、配列$ _GETおよび$ _POSTを使用します。例として、IDと日付の2つの変数があるとしましょう。$ _POST ['ID']と$ _POST ['Date']を使用して変数をキャッチします。

3. リクエストを送信するには、フォーム（HTML要素）が必要です。そのフォームを使用してステータスを送信したい要素を配置します。たとえば、次のように

   <フォームメソッド= "POST" > <入力名= "ID" > < /フォーム>

フォームが送信されます（送信ボタンが必要な場合があります）、 $ _POSTには入力値が入力されます。さて、あなたはPHPの側でそれをつかんで、応答を返すことができます。それは別のページでもプレーンテキストでもかまいません（AJAXを計画している場合）。

1. Ajaxはページリフレッシュの必要性を排除します。このプロセスは実際には同じです。 jQueryを使用すると、単純にブラウザを模倣してSubmitリクエストを行うことができます。

   $ .post（ 'php_page.php'、data_object、call_back）;

call_back関数は、 '引数で応答を取得します。あなたはそれを捕まえて、それをエンドユーザに表示（または処理）します。

私は本当にあなたにコードの答えを与えていませんでしたが、私はあなたにプロセスの仕組みの基本的な考えを与えたと思います。 HTTPリクエストとjQuery Ajax関数の詳細については、こちらをご覧ください。質問のタイトルから