MYSQL/Ajax/PHP 生成的下拉菜单未通过“GET”传递值

Posted 2023-02-24

【中文标题】MYSQL/Ajax/PHP 生成的下拉菜单未通过“GET”传递值

【英文标题】：MYSQL/Ajax/PHP Generated Dropdown not passing values via 'GET'

【发布时间】：2012-08-04 13:46:24

【问题描述】：

看到很多关于这个的线程，但不确定是否与我正在做的事情有关。我尝试了一些“解决方案”，但都无济于事。这是我的一段代码：

<td><select name="County" onChange="getCity('findcity.php?county='+this.value)">

....

   <td><fieldset id="f2">
     <select name="Town">
     <option value="Any">Any Town</option>
     </select>
     </fieldset>
       </td></tr>

....

</td></tr>
           <tr>
           <td><fieldset id="f4">
           <input type="submit" name="Search!">
           </fieldset>
           </form>
           </td>
           </tr>

Town Select 一开始只是作为一个占位符。在更改第一个下拉列表时，然后通过 getCity() 函数填充第二个。它将选定的值传递给 findcity.php，然后使用 mysql 通过 findcity.php 填充它，然后将 TOWN 选择替换为副本：

MySQL 生成一个：（有效）

<select name="Town">
<option value="Any">Any Town</option>
<? while($row=mysql_fetch_array($result))  ?>
   <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
<?  ?>
</select>

这是完成所有工作的函数：

<script>
function getXMLHTTP()  //function to return the xml http object
        var xmlhttp=false;  
        try
            xmlhttp=new XMLHttpRequest();
        
        catch(e)           
            try            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            
            catch(e)
                try
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                
                catch(e1)
                    xmlhttp=false;
                
            
        

        return xmlhttp;
    



    function getCity(strURL)       

        var req = getXMLHTTP();

        if (req) 

            req.onreadystatechange = function() 
                if (req.readyState == 4) 
                    // only if "OK"
                    if (req.status == 200)                         
                        document.getElementById('f2').innerhtml=req.responseText;   

                     else 
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    
                               
                       
            req.open("GET", strURL, true);
            req.send(null);
        

    


</script>

GET 上的最终结果是这样的：

results.php?County=Kent&Sector=Any&Search%21=Submit 

如果我不做任何事情就提交它会起作用：

results.php?County=Bedfordshire&Town=Any&Sector=Any&Search%21=Submit

我想是因为它没有取代输入框。我使用了字段集，希望能消除我认为是因为它在 DIV 中而引起的问题。

唉，我知道有一个简单的解决方案，我只是不记得是什么。

此外，如果您告诉我如何从请求中删除“&Search..”部分，则可以加分：S 不知道为什么搜索按钮会将其放在其中，它在我所做的任何其他作品中都没有，是因为字段集吗？ 我期待任何答案，在此先感谢。

编辑：如果有人甚至可以提供另一种方法来填充第二个下拉菜单并解决这个问题，我会很满意。

$county=$_GET['county'];
//$county =mysql_real_escape_string($county);
include('includes/dbc.php');

$query="SELECT DISTINCT `dir_town` FROM `directories` WHERE `dir_county` = '$county' ORDER BY `dir_town` ASC";
$result=mysql_query($query);?>
<select name="Town">
<option value="Any">Any</option>
<? while($row=mysql_fetch_array($result))  ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <?  ?>
    </select>

我的 dbc.php 完成所有连接。

【问题讨论】：

你应该停止使用mysql_*函数。它们正在被弃用。请改用PDO（PHP 5.1 起支持）或mysqli（PHP 4.1 起支持）。如果您不确定要使用哪一个，read this SO article.

【参考方案1】：

首先，删除“搜索！”从您的查询字符串中，替换

<input type="submit" name="Search!">

与

<input type="submit" value="Search!" />

“搜索”被添加到查询字符串中，因为它具有name 属性。删除 name 并从查询字符串中删除输入。

更新：

您可能需要考虑使用 jQuery 进行 AJAX 调用。它更干净（您可以删除那个丑陋的getHMLHTTP() 函数）。只需包含 jQuery 源代码

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

现在您可以开始使用 jQuery 调用并摆脱内联 onchange 属性：

<script language="javascript" type="text/javascript">
    $("select[name=County]").on('change', function() 
        $.get('findcity.php', 
            
                county: $("this").val()
            , function (data) 
                $("#city").replace(data);
            
        );
    );


</script>

$.get() ($("#city").replace(data);) 的回调函数将用 findcity.php 返回的任何内容替换 id 为“city”的元素。由于这应该是另一个下拉菜单，因此我们将仅以原始形式执行此操作：

<select name="Town" id="city"></select>

然后，当您的输出来自 findcity.php 时，它将用填充的下拉列表替换它：

<select name="Town" id="city">
    <option value="Any">Any Town</option>
    <? while($row=mysql_fetch_array($result))  ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <?  ?>
</select>

现在，如果您需要对“Town”下拉菜单执行类似操作，请重复“Town”的 jQuery .on() 代码（因为我们给它一个 ID，我们可以通过名称或 ID 来引用它）。

//$("#city") can be used instead of $("select[name=Town]") - both return the same element
$("select[name=Town]").on('change', function()  
    // do something here
);

【讨论】：

@Mombassa 我正在编辑这个答案，但我希望它会有所帮助。

整合了所有新的东西，但它没有填充它。有没有办法消除对 findcity.php 的需要？我现在将它的所有代码添加到顶部帖子（底部）添加它。

将$("#city").replace(data) 替换为alert(data)。它说什么？

如果你点击 localhost/findcity.php?County=Kent 会有什么输出？

给我另一个县名。最初，当我使用它进行测试时，它给了我一个完整的填充列表。所以现在错误似乎在 findcity.php 文件中