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

Question

以下是我用于在不同级别的 OpenCart 中显示类别菜单的代码。它有效，但每次点击后它会产生越来越多的XHR finished loading: POST和XHR finished loading: 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>

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

SQL代码：

public function getCategories($parent_id = 0) {
    $sql = "SELECT c.category_id, c.parent_id, cd.name,
        (SELECT COUNT(DISTINCT ch.category_id) from category ch where ch.parent_id = c.category_id and cd.language_id = '" . (int)$this->config->get('config_language_id') . "') as children";

    $sql .= " , (SELECT COUNT(DISTINCT p.product_id) 
FROM product p  
    LEFT JOIN product_description pd ON (p.product_id = pd.product_id) 
    LEFT JOIN product_to_category p2c ON (p2c.product_id = p.product_id) 
    LEFT JOIN category_path cp ON (cp.category_id = p2c.category_id) 
WHERE 
    pd.language_id = '" . (int)$this->config->get('config_language_id') . "' AND 
    p.status = '1' AND 
    p.date_available <= NOW()) AS items";

    $sql .= " FROM category c LEFT JOIN category_description cd ON (c.category_id = cd.category_id) WHERE c.parent_id = '" . (int)$parent_id . "' AND cd.language_id = '" . (int)$this->config->get('config_language_id') . "' AND c.status = '1' ORDER BY c.sort_order, LCASE(cd.name)";

    $query = $this->db->query($sql);
    return $query->rows;
}

如果您通过提供所有必要的JavaScript，jQuery和JSON代码来帮助我，我将非常感激，因为我对这些主题知之甚少： - （

Answer 1

您可以将帖子请求的结果存储在javascript数组中，以便重复使用，请参阅以下内容：

＆＃13;

＆＃13;

var cachedObj = [];

$(document).ready(function(){                
  $('#mnav a').on('click', function() {
    var cat = $(this).attr('id');
    _url = '&category_id=' + cat;
    getData(cat, _url); //<-- Get data from ajax or cache
  });
});

//This function replaces the $.post call (just for example) 
function dummyPost(id, url){
  //url should be used to make the post call
  var data = "<span class='sub'>Test " + id + "</span>";
  return data;
}

function getData(id, url){
  //Try to get data from cache
  var data;
  if(cachedObj[url]) {
    data = cachedObj[url];
    console.log("Data retrived from cache");
  }
  else {
    data = dummyPost(id, url);
    cachedObj[url] = data;
    console.log("Data retrived from post");
  }
  
  $('#mnav .sub').remove();
  //$(data).insertAfter($('#mnav #' + id));
  $('#mnav #' + id).append($(data));
}

＆＃13;

.sub{
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mnav" class="list-group">
  <a id="1" class="list-group-item active">One</a>
  <a id="2" class="list-group-item active">Two</a>
  <a id="3" class="list-group-item active">Three</a>
</div>

＆＃13;

＆＃13;

＆＃13;

我已经修改了应该修改的dummyPost函数以执行发布请求。

你可以在我的示例日志中看到，当你第一次点击链接时，它会使用＆＃34; post＆＃34;检索他的子菜单，接下来，它会从缓存中获取数据数组cachedObj。

我希望它可以帮到你。再见。

<强>更新 应用于您的代码应该像：

<script type="text/javascript">

  var cachedObj = []; //<-- Add an array to cache submenus

  //Add a function to retrieves data from cache or REST
  function getData(url){
    //Try to get data from cache
    if(cachedObj[url]) {
      console.log("Data retrived from cache");
    }
    else {
      $.ajax({
         type: 'GET',
         url: 'index.php?route=test%2Fcategory%2Fchild' + url,
         success: function(data) {
               cachedObj[url] = data;
               console.log("Data retrived from post");
            }),
         async:false
      });
    }
    return cachedObj[url];
 }

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

        var data = getData(url); //<-- Call the new function to get data
        if(data.length>10){
           $('#mnav #sub').remove();
           $(data).insertAfter($('#mnav #' + cat));
        }
    });
 });
</script>

我无法对其进行测试，因此可能包含一些错误。

Answer 2

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

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

 $(document).ready( function() {                
    $(document).on('click', '#mnav a', function( event ) {
        event.preventDefault();
        // some code
    });
 });

Answer 3

我在我的ajax驱动项目中遇到过这个问题。我希望我的解决方案可以帮到你。这可能会阻止创建更多呼叫。

// DOM ready
$(function() {

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

      e.preventDefault();

      // your stuff here

    });
});

Answer 4

在编写任何代码之前，您需要制定有关客户端和服务器通信方式的策略。

我对您的问题的理解是＆＃34;菜单会在每次点击时生成ajax请求，而我并不想要它。＆＃34;

但这就是你构建代码的方式：jQuery设置的菜单的onclick处理程序中有一个$.post()调用。

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

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

1. 让服务器准备这些数据，并将其写入服务器端模板，以便数据立即可用，如<script><?php echo 'var menuData = '.json_encode($my_data).'; ?></script>。这是最快的选择。
2. 使用您现有的ajax网址，但在网页加载时触发一系列ajax请求。将所有结果发送到某个中央数据对象，如选项1中所示。一旦所有数据都返回，您的菜单将起作用。这里的优点是您不必更改任何服务器端代码，但是大量的调用需要时间。
3. 创建一个新的ajax URL，该URL能够一次返回所有菜单数据。这比选项2快，但您必须使用服务器API。

Answer 5

您可以按照以下步骤执行此操作。

使用javascript创建下拉列表：

function myFunction(){
var port_button = document.getElementById("port").value;
if(port_button == 0){
var newhref;
var newhrefid;
var name = ["jquery ajax", "dropdown menu", "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"); 
for(var i = 0; i<3; i++){
  newhref= document.createElement("a");
  newhref.href="http://"+links[i];
  newhref.innerHTML= name[i];
  newhrefid = "idhr_"+i;
  newhref.setAttribute('id', newhrefid );
  div.appendChild(newhref);
}
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("port").value = "2";
}
else if(port_button == 1){
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("port").value = "2";
}
else{
document.getElementById("myDropdown").classList.toggle("hide");
document.getElementById("port").value = "1";
}


}


function filterFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    div = document.getElementById("myDropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}
#myInput {
    border-box: box-sizing;
    background-image: url('searchicon.png');
    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd}

.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
     <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  </div>
</div>
<input type="hidden" id = "port" value = "0">

您可以创建“输入”，“p”，“a”等元素的下拉列表。

如果要选择特定ID，请将此html添加到您的代码中：

<form>
<select id = "name_of_user" name="users" onchange="showUser(this.value)">
  <option value="">Select a person:</option>
  <option value="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>

要将数据库数据放入选择加入此代码：

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, name FROM user";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    $option = "";
    while($row = $result->fetch_assoc()) {
       $option .= '<option value = "'.$row["id"].'">'.ech$row["name"].'</option>';
}
    }
$conn->close();
?>
<form>
<select id = "name_of_user" name="users" onchange="showUser(this.value)">
<?php echo $option; ?>     
</select>
</form>

现在您需要创建并加入AJAX到下拉菜单代码：

function myFunction(){
    var port_button = document.getElementById("port").value;
    if(port_button == 0){
    var newhref;
    var newhrefid;
    var div=document.getElementById("myDropdown"); 
    var val_1 = document.getElementById("name_of_user");//If you want to do a where select.
    $.ajax({
        url: 'test.php',
        type: 'POST',
        datatype: 'Json',
        data: {'q': val_1},
        success: function (response) {
           var newhref;
           var newhrefid;
           var div=document.getElementById("myDropdown"); 
           for(var i = 0; i<response.nunber_of_rows; i++){
             newhref= document.createElement("a");
             newhref.href= response.tabel[i];
             newhref.innerHTML= response.tabel[i];
             newhrefid = "idhr_"+i;
             newhref.setAttribute('id', newhrefid );
             div.appendChild(newhref);
           } 
        }
    });
     document.getElementById("myDropdown").classList.toggle("show");
 else if(port_button == 1){
    document.getElementById("myDropdown").classList.toggle("show");
    document.getElementById("port").value = "2";
 }
 else{
    document.getElementById("myDropdown").classList.toggle("hide");
    document.getElementById("port").value = "1";
     }
  }

您需要将php连接到数据库。

<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT links FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
$i = 0;
while($row = mysqli_fetch_array($result)) {
 $tabel[$i] = array($row['link']);
 $i++;
}
$nunber_of_rows=$i;
mysqli_close($con);
echo json_encode (array(
                    'tabel'=>$tabel,
                    'nunber_of_rows'=>$nunber_of_rows
));
?>

我的示例的来源位于代码段示例中的链接中。

有任何疑问，请求我的帮助。

Answer 6

我认为javascript代码方面可能存在问题。我假设你的PHP和DB相关的代码正在抛出结果。 更好的解决方案是从here

下载ajax菜单加载器插件

您可以将结果丢弃的PHP代码设置为文件，这样前端就不会打扰。您可能需要遵循HTML结构，并且可以使用新的类名更新CSS以应用您的样式。我希望能更快地解决你的问题。