php - MYSQL/Ajax/PHP 生成的下拉列表不通过 'GET' 传递值

Question

看过很多关于此的主题，但不确定是否有任何主题与我正在做的事情相关。我尝试了一些“解决方案”，但都无济于事。这是我的代码片段:

<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>

城镇选择在开头仅作为占位符。在更改第一个下拉列表时，第二个下拉列表将通过 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 完成所有连接。

Answer 1

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

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

与

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

“Search”被添加到查询字符串中，因为它具有 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);) 将替换其 的元素id 是“city”，包含从 findcity.php 返回的任何内容。由于这应该是另一个下拉列表，因此我们将以原始形式执行此操作:

<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
});