Получение JavaScript для определения того, какая опция выбрана в раскрывающемся меню HTML, и возвращение функции PHP, которая выполняет SQL-запрос

Question

ОБНОВЛЕНИЕ : Спасибо за все быстрые ответы. Наверное, следовало бы уточнить, что у меня уже есть JQuery, обеспечивающий функциональность виджетов. Но полезно лучше понять, каковы отношения между HTML, Javascript и PHP в веб-разработке.

Я пытаюсь собрать веб-страницу, которая запрашивает базу данных и возвращает несколько предварительно написанных запросов MySQL:

У меня есть несколько запросов, таких как:

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>

Итак, мой вопрос: как это настроить, чтобы пользователь мог выбрать один из интересующих запросов из выпадающего меню, чтобы запустить соответствующую функцию PHP, отображая результаты запроса, выбранные пользователем ??

Я много искал вокруг и был удивлен, обнаружив, что ничто, похоже, не соответствует тому, что я пытаюсь сделать здесь, хотя я чувствую, что это довольно обычная функция.

Answer 1

Самый простой способ сделать это - использовать событие onChange из элемента формы SELECT.Когда событие вызывается, вы можете затем вызвать функцию AJAX, чтобы заполнить (путем выполнения сценария на стороне сервера) тег 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>

Затем добавьте скрипт jquery для заполнения тега DIV.

$('#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. Как правило, вы хотите начать с решения Ajax-Free, поскольку некоторые браузеры или пользователи могут отключить JavaScript.

2. Следующим шагом является создание страницы PHP, которая возвращает ответ на основе запроса HTTP (GET или POST). Чтобы получить запрос, используйте массивы $ _GET и $ _POST. Итак, в качестве примера, скажем, у вас есть две переменные: ID и Date, затем вы поймаете их с помощью $ _POST ['ID'] и $ _POST ['Date'].

3. Теперь для отправки запроса вам понадобится ФОРМА (элемент HTML). Вы разместите элементы, которые вы хотите представить их статус, используя эту форму. Например:

Когда форма отправлена ​​(вам может понадобиться кнопка отправки), $ _POST заполняется значением ввода. Теперь вы можете получить это на стороне PHP и вернуть ответ. Это может быть другая страница или просто текст (если вы планируете AJAX).

1. Ajax просто устраняет необходимость обновления страницы. Процесс на самом деле такой же. Используя jQuery, вы можете просто имитировать браузер для отправки запроса.

   $. Post ('php_page.php', data_object, call_back);

Функция call_back получит ответ в своем аргументе. Вы ловите это и отображаете (или обрабатываете) для конечного пользователя.

Я действительно не дал вам кодовый ответ, но я думаю, что дал вам базовое представление о том, как этот процесс работает. Возможно, вы захотите узнать больше о HTTP-запросах и функциях jQuery Ajax.

Answer 4

1) Присоедините прослушиватель событий к входу select, чтобы запустить некоторый код JavaScript при изменении его значения

2) Этот код JavaScript отправляет запрос AJAX на URL-адрес вашего сервера, содержащий выбранный запрос

3) Ваш PHP-скрипт на сервере отвечает результатами запроса

4) Обработчик успеха запроса AJAX берет результаты и вставляет их в страницу где-то

Вы не можете простоприсоедините JavaScript к функции PHP, это обратная связь между браузером и сервером, которую нужно создать.