wie man teilweise Seitenaktualisierung mit jquery tut

Question

Ich habe Navigationsmenü wenn geklickt nur ein Inhalt div auf der Seite sollte von HTML Contect-Dateien aktualisiert werden, die auf dem Server ohne eine vollständige Seite aktualisieren, wie kann ich dies mit jquery erreichen?

Answer 1

Bauen Sie Ihr Menü wie gewohnt, das heißt

<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> 

Und ein Platzhalter für den Inhalt.

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

Dann Code ausführen ähnlich wie diese

$("#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 
    }); 
}); 

Answer 2

Siehe load

Beschreibung: Laden von Daten vom Server und legen Sie den zurückgegebenen HTML in das verglichene Element.

Answer 3

Erstellen Sie ein Div-Element und aktualisieren Sie den Inhalt.

<div id="refreshblock"> </div> davon aus, dass dies der Block

auf den Button klicken ist, ein Ajax-Aufruf machen und die Ergebnisse erhalten, sobald man sich die Ergebnisse, sie verarbeiten und aktualisieren, um die oben div

('#refreshoblock).html(results); 

Es aktualisieren die Seite ohne einen Beitrag zurück

Answer 4

Sie müssen die jQuery AJAX-Methoden verwenden, um dies zu erreichen. Es gibt mehrere Möglichkeiten, dies zu tun. Zum Beispiel:

Sagen Sie, Sie haben ein Div mit ID = "Mydiv", die Sie mit Inhalt vom Server aktualisieren möchten. Dann:

wird dazu führen, dass mydiv mit dem von url zurückgegebenen Inhalt aktualisiert wird.

This link beschreibt verschiedene AJAX-Methoden in jQuery.

Answer 5

$('#myLink').click(function(){ 
    $.get('url.php', function(data){ // or load can be used too 
     $('#mydiv').html(data); 
    }); 
}); 

Answer 6

Sie es tun können, mit Hilfe von 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> 

für info Details möglich finden Sie hier: partial page refresh code