Deze blog bespreekt de benaderingen om de div opnieuw te laden zonder de hele pagina opnieuw in JavaScript te laden.
Hoe de div opnieuw te laden zonder de hele pagina in jQuery opnieuw te laden?
De ' div ' kan opnieuw worden geladen zonder de hele pagina opnieuw te laden met behulp van jQuery's 'on()' -methode in combinatie met de ' laden() ” methode.
De methode on() koppelt een of meer gebeurtenishandlers voor de elementen en de methode load() laadt de inhoud in het opgehaalde element. Deze methoden kunnen worden gecombineerd om toegang te krijgen tot de div en deze opnieuw te laden na de geactiveerde gebeurtenis.
Voorbeeld
Laten we de volgende HTML-code eens bekijken:
< lichaam >
< h2 > Zo laadt u de div opnieuw zonder de hele pagina opnieuw te laden h2 >
< div. id = 'mijnDiv' >
< p > JavaScript is een programmeertaal die functies bevat , variabelen , gebeurtenissen en objecten enz. p >
div >
< knop > herladen knop >
lichaam >
In het bovenstaande codeblok:
- Voeg de vermelde kop toe.
- Specificeer ook het “” element met het attribuut “id”.
- Voeg daarna de alinea toe aan de tag '
' en een knop om de gewenste functionaliteit te activeren.
Laten we nu verder gaan met de JavaScript-code:
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
script >
< script >
$ ( 'knop' ) . Aan ( 'Klik' , functie ( ) {
$ ( '#mijnDiv' ) . laden ( '#mijnDiv' )
alarm ( 'Opnieuw geladen' )
} ) ;In dit codefragment
- Voeg de jQuery-bibliotheek toe via de ' src ” attribuut.
- Open de gemaakte knop en koppel de ' Aan() ” methode.
- Dit roept de genoemde functie op bij het klikken op de knop, zoals blijkt uit de bijgevoegde gebeurtenis ' Klik ”.
- Ga in de functiedefinitie naar de meegeleverde ' ” element en laad het opnieuw met de “ laden() ' methode door te verwijzen naar de ' ID kaart ”.
- Het resultaat is dat de meegeleverde div opnieuw wordt geladen wanneer op de knop wordt geklikt en het vermelde bericht via het waarschuwingsdialoogvenster wordt weergegeven.
Uitgang
Het kan worden waargenomen dat de div met succes opnieuw is geladen zonder de hele pagina opnieuw te laden.
Conclusie
Om de div opnieuw te laden zonder de hele pagina opnieuw te laden, gebruikt u de ' Aan() ” methode in combinatie met de “ laden() ” methode. Deze methoden kunnen worden gebruikt om de inhoud van de div opnieuw te laden na de geactiveerde gebeurtenis door deze te openen en er opnieuw naar te verwijzen. Deze blog beschreef de methode om de div opnieuw te laden zonder de hele pagina opnieuw te laden.
- Voeg daarna de alinea toe aan de tag '