使用 Ajax 从不同列表中选择值后填充下拉列表

Question

我有 2 个下拉列表。第一个包含汽车品牌，如座椅、宝马、奥迪等。 第二个我想包含用户在列表 1 中选择的特定品牌的模型。 在我当前的代码状态下，当我从列表 1 中选择 A 品牌时，第二个列表将填充列表 1 中的相同元素。所以我有一个包含完全相同记录的重复列表。

主文件：

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
$css='css.css';
$doc = JFactory::getDocument();
$doc->addStyleSheet('modules/mod_alpha_table/assets/'.$css);
$db= JFactory::getDbo();
$ready = $db->getQuery(true);
$query="SELECT category_name,virtuemart_category_id from uhhu_virtuemart_categories_el_gr INNER JOIN uhhu_virtuemart_category_categories ON uhhu_virtuemart_categories_el_gr.virtuemart_category_id = uhhu_virtuemart_category_categories.category_child_id WHERE uhhu_virtuemart_category_categories.category_parent_id =  105";
$db->setQuery($query);
$options=$db->loadObjectList();
$model="";

?>
<script>
function showUser(str) {
var xmlhttp;


        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","query.php?q="+str,true);
        xmlhttp.send();

}
</script>
<div class="srchcr">
    <div class="srch">
        <form name="searchcar">
        <form>
            <select onchange="showUser(this.value)" name="cats">
            <option value="none">Select Make</option>
                <?php foreach ($options as $row) {

                    echo '<option value=' . $row->virtuemart_category_id . '>'. $row->category_name . '</option>';
                    }
                    ?>
            </select>


            <select name="subcats"  id="txtHint">
                <option value="none">Select Model</option>

            </select>

        </form>
    </div>
</div>

query.php 文件：

<?php
            $doc = JFactory::getDocument();
            $db= JFactory::getDbo();
            $ready = $db->getQuery(true);
            $q = htmlspecialchars($_REQUEST['q']);
            $query='SELECT category_name,virtuemart_category_id from #__virtuemart_categories_el_gr INNER JOIN #__virtuemart_category_categories ON #__virtuemart_categories_el_gr.virtuemart_category_id = #__virtuemart_category_categories.category_child_id WHERE #__virtuemart_category_categories.category_parent_id = $q';
            $db->setQuery($query);
            $options=$db->loadObjectList();

            foreach ($options as $row) {

                    echo '<option name='. $q .' value=' . $row->virtuemart_category_id . '>'. $row->category_name . '</option>';
                    }

            ?>

查询在 phpmyAdmin 进行了测试并且工作正常。似乎第一个查询被执行了两次，而不是 $query.php 文件中的查询。我还尝试将外部文件中的代码包含在主文件中，但它的故事相同。我还将第二个 $query 重命名为 $query2 并执行 $query2 但没有任何改变。有人能告诉我出了什么问题吗？

编辑： 经过休息和更多调试后，我认为这是问题的开始：

 xmlhttp.open("GET","query.php?q="+str,true);

似乎由于某种原因请求，而不是 query.php 被发送到 index.php 并再次触发相同的查询。我添加了 die();在 query.php 的开头并没有发生任何事情。所以我可能需要使用 joomla 语法或其他东西吗？

Answer 1

您在此处似乎遇到了复制粘贴错误。在比较选项标签的创建时，我看到品牌和型号的代码完全相同，即查询和 dom-creation。

所以基本上，您的代码非常好。但是在您的 query.php 中，您再次创建了相同的品牌列表；）

您的代码中的一些通用 cmets：

• 不要创建自己的 XmlHttpRequest 实现，使用 jquery 或 mootools 之类的库

• 在使用来自用户空间 ($_REQUEST['q']) 的值而不对其进行清理时，您很容易受到 sql 注入的攻击。在 stackoverflow 上查看这个问题：Best way to prevent SQL injections in Joomla

• 如果您确实使用相同的查询收集了 2 个列表的信息，请尝试通过 javascript 实现您的逻辑（用户选择品牌，更新模型列表）。所以你的 main.php 仍然创建品牌列表，但也呈现所有模型列表。当用户相应地更改品牌时，这些会显示/隐藏。这样可以避免每次选择品牌时额外往返服务器。