0

私は、ul のサイドバーにメイン カテゴリがあり、サブカテゴリ用のドロップ ダウンがあるモジュールに取り組んでいます。メインカテゴリのリンクをクリックすると、関連するサブカテゴリがドロップダウンに表示され、サブカテゴリをクリックすると、ドロップダウンの下に製品の詳細がリストビューに表示されるはずです。私はこれをすべてやりましたが、今はこれを行うための ajax を探しています。

私はそれを検索しましたが、ほとんどの場合、メイン カテゴリとサブ カテゴリの両方のドロップ ダウンが見つかりましたが、メイン カテゴリのドロップ ダウンは必要ありません。このすべてが残っている例またはリンクを送ってください。宿題をします。

すべてのレコードは、FK を介してリンクされているデータベース 3 テーブルからフェッチされます。

どんな種類の助けにも感謝します。

  <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 でそれに応じてサブ猫のドロップダウンが更新され、サブキャットが読み込まれ、ロードされたサブ猫のいずれかをクリックすることですしたがって、3番目のdivはajaxを使用します。

それが今役立つことを願っています

4

1 に答える 1

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 を使用していますが、それが問題にならないことを願っています

于 2013-06-02T22:25:27.977 に答える