获取 JavaScript 以识别在 HTML 下拉菜单中选择了哪个选项并返回运行 SQL 查询的 PHP 函数

Posted 2023-02-24

技术标签:

【中文标题】获取 JavaScript 以识别在 HTML 下拉菜单中选择了哪个选项并返回运行 SQL 查询的 PHP 函数【英文标题】：Getting JavaScript to identify which option is selected in an HTML dropdown menu and returning a PHP function that runs a SQL Query 【发布时间】：2011-05-24 02:44:57 【问题描述】：

更新：感谢所有快速回复。可能应该澄清我已经让 JQuery 为小部件提供功能。但是更好地理解 html、javascript 和 php 在 Web 开发中的关系是有帮助的。

我正在尝试整理一个查询数据库并返回一些预先编写的 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 函数将运行，显示用户选择的查询结果？？

我已经做了很多搜索，并惊讶地发现似乎没有什么与我在这里尝试做的事情相匹配，尽管我觉得这是一个相当常规的功能。

【问题讨论】：

【参考方案1】：

这在 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
    );
);

【讨论】：

从问题的标题来看，这不是他在寻求帮助吗？谢谢雅各布。是的，我把它放在标题中，但也应该在帖子中澄清，我已经让 JQuery 为小部件提供了额外的东西。我想我仍然对它如何将Javascript返回的值连接到runQuery.php文件中的特定函数感到好奇？【参考方案2】：

最简单的方法是使用 SELECT 表单元素中的 onChange 事件。当事件被触发时，您可以调用 AJAX 函数来填充（通过执行服务器端脚本）DIV 标记。

以下示例假定使用 jQuery。

给你的选择元素一个 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);
);

【讨论】：

在这个解决方案中我更清楚我如何从 javascript 到我的 'runquery.php' 文件，我将在哪里拥有我所有不同的 PHP 函数，我现在的问题是如何将选项值与特定的 PHP 函数相关联。好吧，由于代码通过 PHP 脚本发送值，这将是您要返回的查询的标识符。因此，在 runquery.php 中，您将读取参数 id 并返回它对应的查询。我在概念上理解这一点，但我不知道如何在我的 PHP 文件中以代码方式执行该操作（使用 if(isset...)？）【参考方案3】：

1) 将事件侦听器附加到选择输入以在其值更改时运行一些 JavaScript 代码

2) 该 JavaScript 代码向您服务器上包含所选查询的 URL 发出 AJAX 请求

3) 您在服务器上的 PHP 脚本会响应查询结果

4) AJAX 请求的成功处理程序获取结果并将它们插入到页面中的某处

您不能简单地将 JavaScript 附加到 PHP 函数，它是您需要构建的浏览器和服务器之间的来回通信。

【讨论】：

【参考方案4】：

您需要链接两个部分：客户端和服务器端。

通常，您希望从无 Ajax 解决方案开始，因为某些浏览器或用户可能禁用了 JavaScript。

接下来是创建一个 PHP 页面，该页面根据 HTTP（GET 或 POST）请求返回响应。要获取请求，请使用数组 $_GET 和 $_POST。因此，例如，假设您有两个变量：ID 和 Date，那么您将使用 $_POST['ID'] 和 $_POST['Date'] 捕获它们。

现在要发送请求，您需要一个 FORM（HTML 元素）。您将使用该表格放置您希望提交其状态的元素。例如：

提交表单时（您可能需要一个提交按钮），$_POST 将填充输入的值。现在，您可以在 PHP 端获取它并返回响应。它可以是另一个页面或纯文本（如果您计划使用 AJAX）。