AJAX Débutant: Si then

Question

En menu.html, j'ai mes éléments de menu (a href liens), nous allons les appeler, menu_1, menu_2, ....

Dans Map.js affiche le contenu d'un map, il appelle une API pour afficher des couches et des cartes. J'ai beaucoup de cartes à montrer mais je veux seulement appeler l'api une fois. En utilisant AJAX, je me demandais s'il était possible d'avoir un if/then ou select/case dans mes js, de sorte que si on clique sur menu_1, alors implémenter map_1 etc. sans avoir la page à recharger. La seule façon que je pensais pouvoir faire est d'utiliser Post/get .. alors quand vous cliquez sur menu_1, cela vous amène à page.php? Page_id = 1. JS le lira et affichera la carte.

Je suis nouveau à JS et AJAX donc s'il vous plaît ne hésitez pas à me boucher

Answer 1

Oui, en fait, si vous utilisez jQuery vous pouvez simplement ajouter click gestionnaires d'événements à chacun de ces liens:

jQuery ("#my_menu_item"). click (function() { // Faire quelque chose quand on clique sur l'élément de menu ... });

Vous pouvez ensuite utiliser jQuery.post ou jQuery.get pour récupérer l'URL et mettre à jour votre page.

Answer 2

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