Javascript 如何使用Ajax和JSON制作下拉菜单？

下面是我用来在OpenCart中以不同级别显示类别菜单的代码。它可以工作，但每次单击后，它都会产生越来越多的

XHR完成加载：POST

和

XHR完成加载：GET

s，这会通过有时单击来停止页面：

<script type="text/javascript">
 _url = '';

 $(document).ready(function(){                
    $('#mnav a').on('click', function() {
        var cat = $(this).attr('id');
        _url = '&category_id=' + cat;

        $.post('index.php?route=test/category/child' + _url,
            function(data) {
               if(data.length>10){
                    $('#mnav #sub').remove();
                    $(data).insertAfter($('#mnav #' + cat));
               }
            });
    });
 });

$.ajaxPrefilter(function( options, original_Options, jqXHR ) {
    options.async = true;
});
</script>

_url=''；
$（文档）.ready（函数（）{
$（'mnav a'）。在（'click'，function（）上{
var cat=$（this.attr（'id'）；
_url='&类别id='+cat；
$.post（'index.php？route=test/category/child'+\uURL，
功能（数据）{
如果（数据长度>10）{
$（'#mnav#sub'）。删除（）；
$（数据）.insertAfter（$（'mnav'+cat））；
}
});
});
});
$.ajaxPrefilter（函数（选项、原始选项、jqXHR）{
options.async=true；
});

HTML代码：

<div id="mnav" class="list-group">
  <?php foreach ($categories as $category) { ?>
  <a id="<?php echo $category['category_id']; ?>" class="list-group-item active"><?php echo $category['name']; ?></a>
  <?php } ?>
</div>

控制器代码：

<?php
class ControllerTestCategory extends Controller {
    public function index() {
        if (isset($this->request->get['path'])) {
            $parts = explode('_', (string)$this->request->get['path']);
        } else {
            $parts = array();
        }

        $data['category_id'] = 0;
        if (isset($parts[0])) {
            $data['category_id'] = $parts[0];
        } else {
            $data['category_id'] = 0;
        }

        if (isset($parts[1])) {
            $data['child_id'] = $parts[1];
        } else {
            $data['child_id'] = 0;
        }

        $this->load->model('catalog/cat');

        $data['categories'] = array();

        $categories = $this->model_catalog_cat->getCategories(0);

        foreach ($categories as $category) {
            $children_data = array();

            $filter_data = array(
                'filter_category_id'  => $category['category_id'],
                'filter_sub_category' => true
            );

            $data['categories'][] = array(
                'category_id' => $category['category_id'],
                'name'        => $category['name'],
                'children'    => $category['children'],
                'products'    => $category['products'],
                'href'        => $this->url->link('product/category', 'path=' . $category['category_id'])
            );
        }

        $this->response->setOutput($this->load->view('test/category', $data));
    }
    public function child() {
        if (isset($this->request->get['category_id'])) {
            $this->load->model('catalog/cat');

            $data['categories'] = array();

            $categories = $this->model_catalog_cat->getCategories($this->request->get['category_id']);

            $data['x'] = '<div id="sub">';

            foreach ($categories as $category) {
                $data['x'] .= '<li>' . $category['name'] . '</li>';
            }
            $data['x'] .= '</div>';
        } else {
            $data['x'] = 'NA';
        }
        $this->response->setOutput($this->load->view('test/category', $data));
    }
}

---

问题可能是您没有阻止锚定标记的默认操作。尝试添加
event.preventDefault
。这样，浏览器将触发
POST
请求，而不是
GET
请求

此外，如果要通过ajax添加新的
#mnav a
元素，最好将事件绑定到文档而不是元素

$（文档）.ready（函数（）{
$（文档）。在（'click'，'mnav a'，函数（事件）{
event.preventDefault（）；
//一些代码
});
});
我在ajax驱动的项目中遇到了这个问题。我希望我的解决方案能对你有所帮助。这可能会阻止创建更多呼叫

// DOM ready
$(function() {

    $(document).off('click', '#mnav a').on('click', '#mnav a', function(e){

      e.preventDefault();

      // your stuff here

    });
});

我认为javascript代码方面可能有问题。我假设您的PHP和DB相关代码正确地抛出了结果。
更好的解决方案是从下载ajax菜单加载器插件

您可以将PHP代码设置为将结果放入文件中，这样前端就不会受到任何干扰。您可能需要遵循HTML结构，并且可以使用新的类名更新CSS以应用您的样式。我希望能更快地解决您的问题。
您可以将post请求的结果存储在javascript数组中，以便可以重用它，请参见以下内容：


var cachedObj=[]；
$（文档）.ready（函数（）{
$（'mnav a'）。在（'click'，function（）上{
var cat=$（this.attr（'id'）；
_url='&类别id='+cat；
getData（cat，_url）；//您可以按照以下步骤进行操作

使用javascript创建下拉列表：


函数myFunction（）{
var port_button=document.getElementById（“端口”）.value；
如果（端口按钮==0）{
var-newhref；
var newhrefid；
var name=[“jquery ajax”，“下拉菜单”，“db”]；
var links=[“api.jquery.com/jquery.ajax/”，“www.w3schools.com/howto/howto_js_dropdown.asp”，“www.w3schools.com/php/php_ajax_database.asp”]；
var div=document.getElementById（“myDropdown”）；
对于（变量i=0；i-1）{
a[i].style.display=“”；
}否则{
a[i].style.display=“无”；
}
}
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
#我的输入{
边框框：框大小；
背景图片：url（'searchicon.png'）；
背景位置：14px 12px；
背景重复：无重复；
字体大小：16px；
填充：14px 20px 12px 45px；
边界：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f6f6f6；
最小宽度：230px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd}
.show{display:block；}

下拉列表
在编写任何代码之前，您似乎需要制定策略，确定希望客户端和服务器如何通信

我对您的问题的理解是“菜单在每次单击时都会生成ajax请求，我不希望这样。”

但代码是这样构建的：jQuery设置的菜单onclick处理程序中有一个
$.post（）
调用

另一种方法是将填充菜单所需的所有数据提前发送到客户端，然后在每次单击菜单时，从内存中已有的数据中提取数据，而不是发送ajax请求

有几种方法可以做到这一点。您选择哪种策略取决于您对系统的舒适度和/或控制，以及页面速度的优先级

让服务器准备这些数据，并将其写入服务器端模板，以便数据立即可用，比如
不是如预期的那样吗？onclick钩子没有关闭，并且包含一个Ajax帖子。还有，这条消息显示在哪里？开发工具？您的菜单是shwn，带有悬停css，或者它是如何显示的？假设您的js错误的做法是，每次单击都调用ajax！！！控制器
的代码在哪里？
a
没有
href
不需要
preventDefault（）
您好！您的答案似乎是最实用的。如果您能将其与我的代码完全结合起来，我将不胜感激。老实说，我不知道在哪里放置获取子类别的代码。先生，如果您能帮助我解决此问题，我将不胜感激。我不知道如何在我的项目中使用您的方法。谢谢！它有效，但主要问题仍然存在存在：XHR完成加载：POST和XHR完成加载：GET。通过5次点击不同的类别，Chrome的控制台日志显示大约25次“GET”。添加
函数（事件）
和
事件。preventDefault
没有帮助！可能模型/函数的结果应该通过
JSon
这样发送
// DOM ready
$(function() {

    $(document).off('click', '#mnav a').on('click', '#mnav a', function(e){

      e.preventDefault();

      // your stuff here

    });
});