AJAX-Daten in verschiedene Registerkarten

Ich weiß, viele werden dieses Beispiel bewusst sein.AJAX-Daten in verschiedene Registerkarten

<html> 
 
    <head> 
 
    <script> 
 
    function showUser(str) { 
 
     if (str == "") { 
 
      document.getElementById("txtHint").innerHTML = ""; 
 
      return; 
 
     } else { 
 
      if (window.XMLHttpRequest) { 
 
       // code for IE7+, Firefox, Chrome, Opera, Safari 
 
       xmlhttp = new XMLHttpRequest(); 
 
      } else { 
 
       // code for IE6, IE5 
 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 
      } 
 
      xmlhttp.onreadystatechange = function() { 
 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
        document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
 
       } 
 
      } 
 
// getuser.php is seprate php file. q is parameter 
 
      xmlhttp.open("GET","getuser.php?q="+str,true); 
 
      xmlhttp.send(); 
 
     } 
 
    } 
 
    </script> 
 
    </head> 
 
    <body> 
 

 
    <form> 
 
    <select name="users" onchange="showUser(this.value)"> 
 
     <option value="">Select a person:</option> 
 
     <option value="1">Peter Griffin</option> 
 
     <option value="2">Lois Griffin</option> 
 
     <option value="3">Joseph Swanson</option> 
 
     <option value="4">Glenn Quagmire</option> 
 
     </select> 
 
    </form> 
 
    <br> 
 
    <div id="txtHint"><b>Person info will be listed here...</b></div> 
 

 
    </body> 
 
    </html>

Aber vorstellen Ich habe verschiedene Registerkarten auf der Seite. In dem gibt es verschiedene Varianten des div txtHint wie txtHome, txtMenu1, txtMenu2 etc .. und klicken Sie auf diese divs sollten verschiedene PHP-Seiten über das Javascript wie "gethome.php?q="+str und "getmenu1.php?q="+str und ebenso .. dann wie es zu tun? bitte helfen

<ul class="nav nav-tabs"> 
 
<li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
 
<li><a data-toggle="tab" href="#menu1">Menu1</a></li> 
 
<li><a data-toggle="tab" href="#menu2">Menu2</a></li> 
 
<li><a data-toggle="tab" href="#menu3">Menu3</a></li> 
 
<li><a data-toggle="tab" href="#menu4">Menu4</a></li> 
 
</ul> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
<div class="tab-content"> 
 
<div id="home" class="tab-pane fade in active"> 
 
<h3>HOME</h3> 
 
<div id="txtHome"> 
 
</div> 
 
</div> 
 
<div id="menu1" class="tab-pane fade"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <h3>Menu1</h3> 
 
<div id="txtMenu1"> 
 
</div> 
 
</div> 
 
<div id="menu2" class="tab-pane fade"> \t \t \t \t \t <h3>Menu2</h3> 
 
<div id="txtMenu2"> 
 
</div> 
 
</div> 
 
<div id="menu3" class="tab-pane fade"> \t \t \t \t \t <h3>Menu3</h3> 
 
<div id="txtMenu3"> 
 
</div> 
 
</div> 
 
<div id="menu4" class="tab-pane fade"> \t \t \t \t \t <h3>Menu4</h3> 
 
<div id="txtMenu4"> 
 
</div> 
 
</div> 
 
</div>

Quelle

2016-07-11 Sachin Menon

<li><a data-toggle="tab" href="#menu1" onClick="getDataFor('txtMenu1','your_custom_data')">Menu1</a></li> 
<li><a data-toggle="tab" href="#menu2" onClick="getDataFor('txtMenu2','your_custom_data')">Menu2</a></li> 
<li><a data-toggle="tab" href="#menu3" onClick="getDataFor('txtMenu3','your_custom_data')">Menu3</a></li> 
<li><a data-toggle="tab" href="#menu4" onClick="getDataFor('txtMenu4','your_custom_data')">Menu4</a></li> 
div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <div id="txtHome"> </div> 
</div> 
<div id="menu1" class="tab-pane fade"> 
    <h3>Menu1</h3> 
    <div id="txtMenu1"> </div> 
</div> 
<div id="menu2" class="tab-pane fade"> 
    <h3>Menu2</h3> 
    <div id="txtMenu2"> </div> 
</div> 
<div id="menu3" class="tab-pane fade"> 
    <h3>Menu3</h3> 
    <div id="txtMenu3"> </div> 
</div> 
<div id="menu4" class="tab-pane fade"> 
    <h3>Menu4</h3> 
    <div id="txtMenu4"> </div> 
</div> 
</div> 
<script> 
    function getDataFor(tabId,dataId) { 

      var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById(tabId).innerHTML = xhttp.responseText; 
    } 
    }; 
    var url = "example.php?data="+dataId; 
    xhttp.open("GET",url, true); 
    xhttp.send(); 
    } 
    </script>

Quelle

2016-07-11 08:27:31

aber wie wird diese Arbeit in der showuser fucntion ??? –

AJAX-Daten in verschiedene Registerkarten

Antwort

Verwandte Themen