HTML - Cambiar \ Actualizar el contenido de la página sin actualizar \ recargar la página

Question

Obtengo los datos de DB y los visualizo en un div ... lo que quiero hacer es cuando hago clic en un enlace, debería cambiar el contenido del div

una opción es pasar a través de parámetro URL para sí mismo y volver a cargar la página ...

necesito hacerlo sin recargar \ refrescante ...

<?php 
    $id = '1'; 

    function recp($rId) { 
     $id = $rId; 
    } 
?> 

<a href="#" onClick="<?php recp('1') ?>" > One </a> 
<a href="#" onClick="<?php recp('2') ?>" > Two </a> 
<a href="#" onClick="<?php recp('3') ?>" > Three </a> 

<div id='myStyle'> 
<?php 
    require ('myConnect.php');  
    $results = mysql_query("SELECT para FROM content WHERE para_ID='$id'"); 

    if(mysql_num_rows($results) > 0) { 
     $row = mysql_fetch_array($results); 
     echo $row['para']; 
    } 
?> 
</div> 

el objetivo es cuando Hago clic en cualquiera de los enlaces el contenido de la div y php variable \ s se actualiza sin refrescar .... para que el usuario pueda ver los datos nuevos y después de eso si se realiza alguna consulta está en la nueva variable \ s

ps Sé que va a requerir algunos AJAX pero no sé AJAX ... así que por favor responda con algo por lo que pueda aprender ... mi conocimiento está limitado a HTML, PHP, algunos JavaScript & algunos jQuery

Answer 1

Tiene la idea correcta, así que aquí está cómo proceder: los controladores onclick se ejecutan en el lado del cliente, en el navegador, por lo que no puede llamar a una función PHP directamente. En su lugar, debe agregar una función de JavaScript que (como usted mencionó) usa AJAX para llamar a un script PHP y recuperar los datos. Usando jQuery, puede hacer algo como esto:

<script type="text/javascript"> 
function recp(id) { 
    $('#myStyle').load('data.php?id=' + id); 
} 
</script> 

<a href="#" onClick="recp('1')" > One </a> 
<a href="#" onClick="recp('2')" > Two </a> 
<a href="#" onClick="recp('3')" > Three </a> 

<div id='myStyle'> 
</div> 

a continuación, poner su código PHP en un archivo separado: (la he llamado data.php en el ejemplo anterior)

<?php 
    require ('myConnect.php');  
    $id = $_GET['id']; 
    $results = mysql_query("SELECT para FROM content WHERE para_ID='$id'"); 
    if(mysql_num_rows($results) > 0) 
    { 
    $row = mysql_fetch_array($results); 
    echo $row['para']; 
    } 
?> 

Answer 2

jQuery hará el trabajo. Puede usar la función jQuery.ajax, que es general para realizar llamadas ajax, o sus contenedores: jQuery.get, jQuery.post para obtener/publicar datos. Es muy fácil de usar, por ejemplo, echa un vistazo al tutorial this, que muestra cómo usar jQuery con PHP.