Hur man laddar om div utan att ladda om hela sidan i jQuery

Hur Man Laddar Om Div Utan Att Ladda Om Hela Sidan I Jquery



När du skapar flera webbsidor för en webbplats kan det finnas ett krav att replikera data. Till exempel att använda samma data på en annan webbsida vid den utlösta händelsen. I sådana situationer hjälper det att ladda om div:n utan att ladda om hela sidan att hantera data effektivt, vilket sparar tid.

Den här bloggen kommer att diskutera metoderna för att ladda om div utan att ladda om hela sidan i JavaScript.

Hur laddar man om div utan att ladda om hela sidan i jQuery?

den ' div ” kan laddas om utan att ladda om hela sidan med hjälp av jQuerys ”on()”-metod i kombination med ” ladda() 'metoden.







Metoden on() associerar en eller flera händelsehanterare för elementen, och metoden load() läser in innehållet i det hämtade elementet. Dessa metoder kan kombineras för att komma åt div och ladda om den vid den utlösta händelsen.



Exempel
Låt oss överblicka följande HTML-kod:



< kropp >
< h2 > Så här laddar du om div utan att ladda om hela sidan h2 >
< div id = 'myDiv' >
< sid > JavaScript är ett programmeringsspråk som innehåller funktioner , variabler , händelser och föremål mm. sid >
div >
< knapp > ladda om knapp >
kropp >

I ovanstående kodblock:





  • Inkludera den angivna rubriken.
  • Ange också elementet '
    ' som har attributet 'id'.
  • Efter det, inkludera stycket i taggen '

    ' och en knapp för att aktivera önskad funktionalitet.

Låt oss nu gå vidare till JavaScript-koden:

< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
manus >
< manus >
$ ( 'knapp' ) . ( 'klick' , fungera ( ) {
$ ( '#myDiv' ) . ladda ( '#myDiv' )
varna ( 'Laddad om' )
} ) ;

I det här kodavsnittet



  • Inkludera jQuery-biblioteket via ' src ' attribut.
  • Gå till den skapade knappen och associera ' på() 'metoden.
  • Detta kommer att anropa den nämnda funktionen när du klickar på knappen, vilket framgår av den bifogade händelsen ' klick ”.
  • I funktionsdefinitionen, gå till den inkluderade '
    '-elementet och ladda det igen med ' ladda() '-metoden genom att hänvisa till dess ' id ”.
  • Som ett resultat kommer den medföljande div-enheten att laddas om igen när du klickar på knappen, och det angivna meddelandet via varningsdialogrutan kommer att visas.

Produktion

Det kan observeras att div har laddats om utan att ladda om hela sidan.

Slutsats

För att ladda om div utan att ladda om hela sidan, använd ' på() ”-metoden i kombination med ” ladda() 'metoden. Dessa metoder kan användas för att ladda om innehållet i div vid den utlösta händelsen genom att komma åt den och hänvisa till den igen. Den här bloggen beskrev metoden för att ladda om div:n utan att ladda om hela sidan.