Pass Link-ID zu PHP-Seite mit Ajax und Öffnung in einem anderen div

Question

ich eine index.php Seite mit einem Link haben Sie wie folgt vor:

<a id="link" href="test.php?id=1">Test</a> 

ich auf der gleichen Seite einen div Container haben wie folgt:

<div id="container" class="panel-body"> 

und ajax jQuery-Code auf der gleichen Seite wie folgt:

<script type="text/javascript"> 
$("#link").click(function(){ 
    $.ajax({ 
    type: "get", 
     url: "test.php", 
     data: {'data':dataString}, 
     success: function(data){ 
      $('#container').html(data); 
     } 
    }); 
}); 
</script> 

Meine Aufgabe ist es, die oben angegebene ID = 1 in der Verbindung passieren eine test.php nd Wert wird auf der gleichen Seite im div # -Container angezeigt.

Das Problem ist, dass das Klicken auf den Link öffnet eine neue Seite in einem neuen Windows mit URL test.php? ID = 1 statt Inhalt von PHP auf der gleichen Seite anzuzeigen.

Wie kann ich das Ergebnis der test.php Seite auf div namens #container der gleichen Seite in jquery anzeigen ???

Vielen Dank im Voraus.

Answer 1

Das Problem ist, dass auf den Link klicken, wird in einem neuen Fenster mit url test.php eine neue Seite öffnet id = 1 nicht angezeigt wird? Inhalt von PHP auf derselben Seite.

Sie müssen das Standardverhalten von Anker stoppen mit event.preventDefault():

$("#link").click(function(e) { 
    e.preventDefault(); // <-------stop the def behavior here. 
    var id = this.href.split('=').pop(); // extract the id here 
    $.ajax({ 
    type: "get", 
    url: "test.php", 
    data: {id:id}, // now pass it here 
    success: function(data) { 
     $('#container').html(data); //copy and paste for your special case 
    } 
    }); 
}); 

Answer 2

Nur ein Standardverhalten des Links verhindern:

$("#link").click(function(event){ 
    event.preventDefault(); 

    $.ajax({ 
    type: "get", 
     url: "test.php", 
     data: {'data':dataString}, 
     success: function(data){ 
      $('#container').html(data); //copy and paste for your special case 
     } 
    }); 
});