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

是的，事实上，如果您使用的是jQuery，则可以在每个链接中添加click个事件处理程序：

jQuery（“＃my_menu_item”）。click（function（）{ //单击菜单项时执行某些操作... }）;

然后，您可以使用jQuery.post或jQuery.get来检索网址并更新您的网页。

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>

AJAX初学者：如果那么声明

2 个答案: