Question

我正在开发一个模块，我在ul的侧边栏中有主要类别，我有一个子类别的下拉列表。我的想法是，当我点击主要类别中的任何链接时，它应该在下拉列表中显示相关的子类别，当我点击子类别时，它应该在列表视图中显示下面的产品详细信息。我做了这一切，但现在正在寻找ajax为我做这件事。

我搜索了它，但主要是我发现主要和子类别的下拉，但我不需要下拉主要类别。发给我一个例子或任何有这整件事的链接休息我会做我的家庭工作。

从数据库三表中获取所有记录，这些表通过FK链接。

提前感谢任何帮助。

  <div id="main-cat">
    <ul>
       <li></li>
       <li></li>
       <li></li>           
    </ul>
 </div>

<div id="sub-cat">
  <select>
     <option></option>
     <option></option>
     <option></option>
  </select>

  <div id="products">
    <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>

现在我要做的是当页面加载时显示主要类别的ist div，当我点击任何主要的猫时，它会相应地用ajax更新子猫的下拉，然后当subcat加载时我点击任何一个子猫用ajax相应地加载第三个div。

希望它现在有所帮助

Answer 1

我不明白，为什么要使用Ajax作为下拉菜单？

无论如何，你去

<div class="menuHolder" id="menuHolder">
      <script type="text/javascript">
            loadMenu();
      </script>
</div>

Ajax函数（.js文件）

function loadMenu( ANY VALUES HERE ) {
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","/ajax.php?page=menu&key="+value,true);
    xmlhttp.send(null);

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("menuHolder").innerHTML= xmlhttp.responseText;
              /* returns the HTML from the Ajax page into menuHolder div */
        }
    }
}

Ajax.php将其放在服务器的根目录

$file = $_GET['page'];

if(file_exists('yourpath/ajax/'.$file.'.php')){
    include_once 'yourpath/ajax/'.$file.'.php';
} else {
    print 'File could not be found';
}

Ajax文件：menu.php，所有html都将返回给定容器

Your code, Values passed with Ajax can be received with $_GET['key']
<div class="menu" id="menu">
      /* code for menu */
</div>
<?
if(isset($_GET['submenu']) { /* if you passed a value for submenu with ajax */
    ?>
    <div class="submenu" id="menu">
        /* code for submenu */
    </div>
    <?
}
?>
 .......

正如你注意到我非常不喜欢JQuery，我总是使用普通的javascript，希望这不是问题

单击主类别时显示子类别，并在单击带有ajax的子猫时显示产品

1 个答案: