如何在javascript和jquery中使用ajax请求获取数据

时间:2016-05-16 11:19:06

标签: javascript jquery ajax

 function main()
    {
 for (var i = 0; i < obj.length; i++) 
   { 
     createTabs(i, obj);
     createPanel(i, obj);
   }
   }

我已经从下面的代码中创建了选项卡和面板,并以这样的方式附加了tab1单击时panel1将显示而tab2 for tab2

  function createTabs(i,obj)
 {
   var tab = document.createElement("LI");
   tab.id = "tab_"+i;
   tab.className = "tabs";
   tab.name="header_tabs";
   if(i==2)
  {
    tab.style.background="#1EAEDB";
   }    
   var tabLink = document.createElement("A");
   tabLink.className = "text";
   tabLink.id = "tabHeader_"+i;
    if(i==2)
     {
    tabLink.style.color="white";
   }    
    var tabHeading=document.createTextNode(obj[i].name);
    tabLink.appendChild(tabHeading);
    tab.appendChild(tabLink);
    document.getElementById("tabs").appendChild(tab);
  }


 function createPanel(i,obj)
  {
    var panel = document.createElement("div");
    panel.id = "panel_"+i;
    if(i==2){ //FIXME
         panel.style.display = "block";
         panel.className = "panel active";
      }else{
         panel.style.display = "none";
         panel.className = "panel";
      }

      var panelText=document.createTextNode(obj[i].name);
      panel.appendChild(panelText);

      document.getElementById("main").appendChild(panel);
     }


     function clickTabEvent()
    {
    var tabs = document.getElementsByTagName("LI");
    for (var i = 0, len = tabs.length; i < len; i++) {
       var item = tabs[i];
       if (item.id && (item.id.indexOf("tab_")!=-1)){
        (function (item) {
           item.addEventListener('click', function(){
               showTabPanel(item);
               showActiveTab(item);
            });
         })(item);
       }        
     }
    } 


      function showTabPanel(item)
      {
          var panel_div=document.getElementsByTagName("DIV");
          for (var i = 0, len = panel_div.length; i < len; i++) {
          var panel_item = panel_div[i];
          if(panel_item.id && (panel_item.id.indexOf("panel_")!=-1)){
             if(item.id.substr(4,5)==panel_item.id.substr(6,7)){
                panel_item.style.display="block";
             }
            else
             {   
               panel_item.style.display="none";
             }
            }
          }
         }

因此,对于上面的代码,如何在单击tab1时在jquery中发出Ajax请求,它应该检索panel1的数据,当单击tab2时,它应该检索panel2的数据

0 个答案:

没有答案