Cambio DIV contenido usando ajax, php y jQuery

Question

que tienen un div que contiene un texto para la base de datos:

<div id="summary">Here is summary of movie</div> 

y una lista de enlaces:

<a href="?id=1" class="movie">Name of movie</a> 
<a href="?id=2" class="movie">Name of movie</a> 
.. 

el proceso debería ser algo como esto :

1. Haga clic en el enlace
2. Ajax usando la URL del enlace de pasar datos a través de GET para archivo php/misma página
3. PHP cadena devuelve
4. El div se cambia a esta cadena

Answer 1

<script> 

function getSummary(id) 
{ 
    $.ajax({ 

    type: "GET", 
    url: 'Your URL', 
    data: "id=" + id, // appears as $_GET['id'] @ your backend side 
    success: function(data) { 
      // data is ur summary 
      $('#summary').html(data); 
    } 

    }); 

} 
</script> 

Y añadir onclick evento en sus listas

<a onclick="getSummary('1')">View Text</a> 
<div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div> 

Answer 2

Se podría lograr esto con bastante facilidad con jQuery mediante el registro para el evento click de los anclajes (con class = "película") y utilizando el método .load() para enviar una petición AJAX y reemplazar el contenido del div resumen:

$(function() { 
    $('.movie').click(function() { 
     $('#summary').load(this.href); 

     // it's important to return false from the click 
     // handler in order to cancel the default action 
     // of the link which is to redirect to the url and 
     // execute the AJAX request 
     return false; 
    }); 
}); 

Answer 3

jQuery.load()

$('#summary').load('ajax.php', function() { 
    alert('Loaded.'); 
}); 

Answer 4

probar esto

function getmoviename(id) 
    {  
    var p_url= yoururl from where you get movie name, 
    jQuery.ajax({ 
    type: "GET",    
    url: p_url, 
    data: "id=" + id, 
     success: function(data) { 
     $('#summary').html(data); 

    } 
});  
} 

y HTML parte es

<a href="javascript:void(0);" class="movie" onclick="getmoviename(youridvariable)"> 
    Name of movie</a> 

    <div id="summary">Here is summary of movie</div> 

Answer 5

Esto funciona para mí y que Don no es necesario el guión en línea:

Javascript:

$(document).ready(function() { 
    $('.showme').bind('click', function() { 

     var id=$(this).attr("id"); 
     var num=$(this).attr("class"); 
     var poststr="request="+num+"&moreinfo="+id; 
     $.ajax({ 
       url:"testme.php", 
       cache:0, 
       data:poststr, 
       success:function(result){ 
        document.getElementById("stuff").innerHTML=result; 
       } 
     }); 
    }); 
}); 

HTML:

<div class='request_1 showme' id='rating_1'>More stuff 1</div> 
    <div class='request_2 showme' id='rating_2'>More stuff 2</div> 
    <div class='request_3 showme' id='rating_3'>More stuff 3</div> 

    <div id="stuff">Here is some stuff that will update when the links above are clicked</div> 

La solicitud se envía a testme.php:

header("Cache-Control: no-cache"); 
    header("Pragma: nocache"); 

    $request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']); 
    $request_moreinfo = preg_replace("/[^0-9]/","",$_REQUEST['moreinfo']); 

    if($request_id=="1") 
    { 
     echo "show 1"; 
    } 
    elseif($request_id=="2") 
    { 
     echo "show 2"; 
    } 
    else 
    { 
     echo "show 3"; 
    } 

Answer 6

<script> 

function getSummary(id) 
{ 
    $.ajax({ 

    type: "GET",//post 
    url: 'Your URL', 
    data: "id="+id, // appears as $_GET['id'] @ ur backend side 
    success: function(data) { 
      // data is ur summary 
      $('#summary').html(data); 
    } 

    }); 

} 
</script> 

Answer 7

<script> 
$(function(){ 
    $('.movie').click(function(){ 
     var this_href=$(this).attr('href'); 
     $.ajax({ 
      url:this_href, 
      type:'post', 
      cache:false, 
      success:function(data) 
      { 
       $('#summary').html(data); 
      } 
     }); 
     return false; 
    }); 
}); 
</script>