Comment partielle mise à jour de la page avec jQuery?

J'ai le menu de navigation. Lorsque l'utilisateur clique dessus, seulement le contenu de la page div doit être mis à jour à partir du contenu html fichier (qui dans le serveur) sans faire une actualisation de la page entière.

Comment puis-je réaliser cela à l'aide de jQuery?

InformationsquelleAutor DSharper | 2010-10-23
  1. 17

    Construire votre menu comme d'habitude, c'est à dire

    <ul id="menu">
    <li><a href="about-us.html">About Us</a>
    <li><a href="services.html">Services</a>
    <li><a href="products.html">Products</a>
</ul>

    Et un espace réservé pour le contenu.

    <div id="content"></div>

    Puis exécuter du code similaire à ce

    $("#menu li a").click(function(e) {
    //prevent from going to the page
    e.preventDefault();

    //get the href
    var href = $(this).attr("href");
    $("#content").load(href, function() {
        //do something after content has been loaded
    });
});
    InformationsquelleAutor Marko
  2. 3

    Vous devez utiliser l'AJAX de jQuery méthodes pour cela. Il y a plusieurs façons d'aller à ce sujet. Par exemple:

    Dire que vous avez un div avec id="mydiv" que vous souhaitez mettre à jour avec le contenu à partir du serveur. Alors:

      $("#mydiv").load("url");

    va provoquer mydiv être mis à jour avec le contenu retourné à partir de l'url.

    Ce lien décrit les diverses méthodes AJAX en jQuery.

    InformationsquelleAutor Vincent Ramdhanie
  3. 3
    $('#myLink').click(function(){
   $.get('url.php', function(data){ //or load can be used too
       $('#mydiv').html(data);
   });
});
    • marko a la réponse la plus complète
    • Super,Merci à tous....
    InformationsquelleAutor polyhedron
  4. 1

    Voir vide

    Description: Charger des données à partir du serveur et de placer le code HTML renvoyé dans la correspondance de l'élément.

    InformationsquelleAutor BrunoLM
  5. 1

    créer un élément div et mettre à jour le contenu.

    <div id="refreshblock"> </div> supposons que c'est le bloc

    sur le bouton cliquer , faire un appel ajax et obtenir les résultats une fois que vous obtenez les résultats du processus et de mise à jour ci-dessus div

    ('#refreshoblock).html(results);

    Il mettra à jour la page sans faire un post de retour

    InformationsquelleAutor kobe
  6. -1

    vous pouvez le faire, avec l'aide de jquery (AJAx) 

        <div id="leftDiv">
<s:include value="/pages/profile.jsp"></s:include>
</div>
<div>
<a href="#" id="idAnchor">Partial Refresh</a>
</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('#idAnchor').click(function(){

$.ajax({
         url: 'getResultAction', //action to be perform
         type: 'POST',       //type of posting the data
         data: { name: 'Jeetu', age: '24' }, //data to set to Action Class
         dataType: 'html',
         success: function (html) {
         ('#leftDiv).html(html); //set result.jsp output to leftDiv 
    },
     error: function(xhr, ajaxOptions, thrownError){
       alert('An error occurred! ' + thrownError);
    },
  });
 });
})
</script>

    info pour plus de détails vous pouvez trouver ici: partielle actualisation de la page de code

    InformationsquelleAutor Vishu