AJAX Новичок: если тогда заявление

Question

В menu.html у меня есть пункты меню (ссылки href), давайте их назовем, menu_1, menu_2, ....

В map.js отображается содержимое карты, вызывается API для отображения некоторых слоев и карт. Мне нужно показать много карт, но я хочу вызвать API только один раз.

Используя AJAX, мне было интересно, возможно ли иметь в моем js if / then или select / case, чтобы при нажатии на menu_1 реализовывать map_1 и т. Д., Не имея страницы для перезагрузки. Единственный способ, которым я думал, что смогу сделать это, это использовать Post / get .. поэтому, когда вы нажимаете на menu_1, вы переходите к page.php? Page_id = 1. JS прочитает это и покажет карту.

Я новичок в JS и AJAX, поэтому, пожалуйста, не стесняйтесь убивать меня

Answer 1

ДЕМО: http://jsbin.com/ohaxa/4/edit

$(function() {
  $('#menu li > a').click(function(e) {
  e.preventDefault();

  var my_id = $(this).attr('id'); // li a #

$.ajax({
   type: "POST",
   url: "ajax_call.php",
   data: "action=do_something&my_id=" + my_id,
   success: function(data){

     my_function(my_id); //run your outside function...

    //OR use "data" from the php echo and append it to DOM 
    // $(#ajax_call_back).append(data); 

   },
  complete: function(data){
     //on complete do something..
   },
  error: function(data){
     //this here for demo pseudo ajax handle error instead!
     my_function(my_id);

   },
 }); 

});
});

function my_function(id) {
  alert(id);
  var map = '';

  switch(id)
{
case 1:
map = id;  //map_1
  break;
case 2:
map = id;  //map_2
  break;
case 3:
map = id;  //map_3
  break;
default:
map = id;  //map_0
}

 $('#application').text('map_' + map);  

};

     <ul id="menu">
           <li><a href="#" id="1">menu_1</a></li>
           <li><a href="#" id="2">menu_2</a></li>
           <li><a href="#" id="3">menu_3</a></li>
           <li><a href="#" id="4">menu_4</a></li>
           <li><a href="#" id="5">menu_5</a></li>
        </ul>

     <div id="application"></div>
  <div id="ajax_call_back"></div>

Answer 2

Да, на самом деле, если вы используете jQuery , вы можете просто добавить click обработчики событий к каждой из следующих ссылок:

jQuery ("# ​​my_menu_item"). Click (function () { // Делаем что-нибудь, когда пункт меню нажимается ... });

Затем вы можете использовать jQuery.post или jQuery.get для получения URL-адреса и обновления вашей страницы.