Как использовать Ajax и JSON для создания выпадающего меню?

Вы можете сохранить результат почтового запроса в массиве javascript, чтобы его можно было повторно использовать, см. Ниже:

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

<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>

dummyPost

Я выполнил cachedObjфункцию, которая должна быть изменена, чтобы выполнить почтовый запрос.

Вы можете видеть в журнале моего примера, что при первом щелчке по ссылке он получает свое подменю с «пост», в следующий раз вместо этого он <script type = "text / javascript" > var cachedObj = []; // <- Добавить массив в кэш-подменю // Добавить функцию для извлечения данных из кеша или функции REST getData ( url ) { // Попытка получить данные из кеша if ( cachedObj [ url ]) { console . log ( «Данные, извлеченные из кеша» ); } else { $ . ajax ({ type : 'GET' , url : 'index.php? route = test% 2Fcategory% 2Fchild' + url , success : function ( data ) { cachedObj [ url ] = data ; console . log ( "Данные, полученные из сообщения " ); }), async : false }); } return cachedObj [ url ]; } $ ( документ ). ready ( function () { $ ( '#mnav a' ). on ( 'click' , function () { var cat = $ ( this ). attr ( 'id' ); var url = '& category_id =' + cat ; var data = getData ( url ); // <- вызов новой функции для получения данных if ( data . length > 10 ) { $ ( '#mnav #sub' ). remove (); $ ( data ). insertAfter ( $ ( '#mnav #' + cat )); } }); }); </ script> из кэшированного массива . event.preventDefault

Надеюсь, это поможет вам. До свидания.

Обновление: Применительно к вашему коду должно быть:

POST

Я не могу проверить его, поэтому он может содержать некоторые ошибки.

Проблема может заключаться в том, что вы не препятствуете действию якоря-тега по умолчанию. Попробуйте добавить GET. Таким образом браузер упустит POSTзапрос, а не GETтот.

Кроме того, было бы лучше привязать событие к документу не к элементам, если вы добавляете новые #mnav aэлементы через ajax.

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

Прежде чем писать какой-либо код, похоже, вам нужно разработать стратегию о том, как вы хотите, чтобы клиент и сервер общались.

Мое понимание вашей проблемы заключается в том, что «меню генерирует запросы ajax с каждым щелчком, и я не хочу этого».

Но именно так вы создали код: обработчик onclick в меню, настроенный jQuery, имеет в нем $.post()вызов.

Другой способ сделать это - отправить все данные, необходимые для заполнения меню клиенту спереди. Затем при каждом нажатии на меню извлекайте данные, которые уже находятся в памяти, а не отправляете запрос ajax.

Есть несколько способов сделать это, о чем я могу думать. Какую стратегию вы выбираете, зависит от вашего комфорта и / или контроля над системой, а также от ваших приоритетов для скорости страницы .

1. Попросите сервер подготовить эти данные и записать их в шаблон на стороне сервера, чтобы данные были немедленно доступны, что-то вроде <script><?php echo 'var menuData = '.json_encode($my_data).'; ?></script>. Это самый быстрый вариант.
2. Используйте существующие URL-адреса ajax, но при загрузке страницы сработайте ряд запросов ajax. Отправьте все результаты на некоторый центральный объект данных, как в варианте 1. После того как все данные вернутся, ваше меню будет работать. Преимущество здесь в том, что вам не нужно менять какой-либо код на стороне сервера, но для многих вызовов потребуется время.
3. Создайте новый URL-адрес ajax, который сможет возвращать все данные меню в одной партии. Это будет быстрее, чем вариант 2, но вам придется работать на вашем сервере api.

Я столкнулся с этой проблемой в моем проекте, управляемом ajax. Надеюсь, мое решение может вам помочь. Это может помешать созданию большего количества вызовов.

// DOM ready
$(function() {

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

      e.preventDefault();

      // your stuff here

    });
});

Вы можете сделать это, выполнив следующие шаги.

создать раскрывающийся список с помощью 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<