Denne bloggen vil diskutere fremgangsmåtene for å laste div-en på nytt uten å laste hele siden på nytt i JavaScript.
Hvordan laste inn div på nytt uten å laste hele siden på nytt i jQuery?
« div ' kan lastes inn på nytt uten å laste hele siden på nytt ved å bruke jQuerys 'on()'-metode i kombinasjon med ' laste() 'metoden.
On()-metoden assosierer én eller flere hendelsesbehandlere for elementene, og load()-metoden laster innholdet inn i det hentede elementet. Disse metodene kan kombineres for å få tilgang til div-en og laste den på nytt ved den utløste hendelsen.
Eksempel
La oss se på følgende HTML-kode:
< kropp >
< h2 > Dette er hvordan du laster inn div uten å laste hele siden på nytt h2 >
< div id = 'myDiv' >
< s > JavaScript er et programmeringsspråk som inneholder funksjoner , variabler , hendelser og gjenstander etc. s >
div >
< knapp > last på nytt knapp >
kropp >
I kodeblokken ovenfor:
- Ta med den oppgitte overskriften.
- Spesifiser også «»-elementet med attributtet «id».
- Deretter inkluderer du avsnittet i «
»-taggen og en knapp for å utløse ønsket funksjonalitet.
La oss nå gå videre til JavaScript-koden:
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' >
manus >
< manus >
$ ( 'knapp' ) . på ( 'klikk' , funksjon ( ) {
$ ( '#myDiv' ) . laste ( '#myDiv' )
varsling ( 'Lastet på nytt' )
} ) ;I denne kodebiten
- Inkluder jQuery-biblioteket via ' src ' Egenskap.
- Få tilgang til den opprettede knappen og tilknytt ' på() 'metoden.
- Dette vil påkalle den nevnte funksjonen ved å klikke på knappen, som det fremgår av den vedlagte hendelsen ' klikk '.
- I funksjonsdefinisjonen får du tilgang til den inkluderte ' '-elementet og last det på nytt ved å bruke ' laste() '-metoden ved å referere til dens ' id '.
- Som et resultat vil den inkluderte div-en lastes inn på nytt ved å klikke på knappen, og den oppgitte meldingen via varseldialogboksen vil vises.
Produksjon
Det kan observeres at div-en ble lastet inn på nytt uten å laste hele siden på nytt.
Konklusjon
For å laste div-en på nytt uten å laste hele siden på nytt, bruk ' på() '-metoden i kombinasjon med ' laste() 'metoden. Disse metodene kan brukes til å laste innholdet til div-en på nytt etter den utløste hendelsen ved å få tilgang til den og referere til den igjen. Denne bloggen beskrev metoden for å laste div-en på nytt uten å laste hele siden på nytt.
- Deretter inkluderer du avsnittet i «