Den här artikeln kommer att prata om vad AJAX och jQuery är och kommer att titta på exempel på hur man använder dem.
AJAX är ett verktyg för att bygga webbapplikationer som kommunicerar med servern i bakgrunden. I det här fallet får användaren en applikation med dynamiska innehållsuppdateringar, utan att ladda om hela sidan.
jQuery är ett JavaScript-ramverk, ett bibliotek som låter dig mer bekvämt använda vissa Javascript-funktioner, som att skapa visuella effekter, hantering av händelser, arbeta med DOM- och AJAX-stöd.
Du kan ladda ner den senaste versionen av jQuery och bekanta dig med alla funktioner i detalj på utvecklarens webbplats: http://www.jquery.com/
I den här artikeln kommer vi endast att titta på en jQuery-biblioteksfunktion, nämligen $.ajax()-funktionen. Denna funktion låter oss både överföra data till servern och ta emot svar från servern, allt i bakgrunden, utan att ladda om sidan. Inställningarna för att ta emot eller sända data beror på parametrarna som funktionen $.ajax() anropas med. De viktigaste kommer att diskuteras nedan. Du kan läsa mer om parametrar i jQuery-manualen.
Låt oss gå vidare och överväga exempel.
Viktig!
För att exemplen ska fungera korrekt måste du:
1. Alla filer måste skrivas i UTF-8-kodning.
2. Skript måste köras på webbservern och inte köras i webbläsaren som en fil.
Låt oss skapa ett enkelt program som visar aktuell tid, uppdaterad en gång i sekunden med hjälp av en timer. En funktion i detta program är att få information om den aktuella tiden från en annan extern fil.
Innehållet i filen index.html.
function show() ( $.ajax(( url: "time.php", cache: false, success: function(html)( $("#content").html(html); ) )); ) $(dokument ).ready(function())( show(); setInterval("show()",1000); ));
Koden har flera funktioner, låt oss förklara dem.
1. jQuery-biblioteket ingår i HTML-filens rubrik. Denna rad är skriven för detta ändamål.
Själva filen jquery.js finns i samma mapp som exempelfilerna.
2. En behållare skapas i dokumentets brödtext där vi ska ladda innehållet.
3. Funktionen $(document).ready(), konstigt vid första anblicken, krävs för att jQuery ska fungera korrekt, och i den kan vi utföra alla förberedelser för att programmet ska fungera. I vårt fall anropar vi funktionen show(), som specificerar mekanismen för att hämta innehåll från en annan fil, och ställer in en timer så att funktionen show() anropas en gång per sekund.
$(document).ready(function())( show(); setInterval("show()",1000); ));
4. Show()-funktionen består av att anropa $.ajax()-funktionen med ett visst antal parametrar, vilket gör att vi kan hämta information från en extern fil på servern i bakgrunden.
$.ajax(( url: "time.php", cache: false, success: function(html)( $("#content").html(html); ) ));
Låt oss titta på parametrarna som används av $.ajax()-funktionen.
Url: "time.php" Åtkomst till time.php-filen för att hämta innehåll. cache: false Frågeresultat cachelagras inte. success: function(html)( $("#content").html(html); ) Om begäran lyckas övergår kontrollen till funktionen, som tar emot innehållet som en parameter och skriver dess behållare. Skrivning till behållaren sker på denna rad:
$("#content").html(html);
Innehållet i filen time.php.
Syftet med time.php-filen är att visa aktuell tid på skärmen.
Ladda ner exempel på källfiler (16,6 kb):
Ett program som dynamiskt laddar innehåll efter användarens gottfinnande.
Innehållet i filen index.html.
Vilken sida vill du öppna?
$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url: "page1.html", cache: false, success: function(html) ( $ ("#content").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", cache: false, success : function(html)( $("#content").html(html); ) ));I dokumentets brödtext har ett formulär skapats som har två knappar genom vilka användaren väljer önskat innehåll. Och en behållare för att ladda innehåll.
Klickhändelsen på knappen "Sida 1" hanteras av funktionen $("#btn1").click() och klickhändelsen på knappen "Sida 2" behandlas av $("#btn2"). click()-funktionen.
Innehållet i filerna page1.html och page2.html, som laddas dynamiskt i innehållsområdet, är enkla HTML-sidor eller textfiler som innehåller innehåll.
Ladda ner exempel på källfiler (18,4 kb):
Låt oss titta på ett exempel som skickar det angivna användarnamnet till servern. När servern får ett namn skickar den en hälsning och räknar antalet tecken i det angivna namnet.
Innehållet i filen index.html.
Ange ditt namn:
$(document).ready(function())( $("#myForm").submit(function())( $.ajax((typ: "POST", url: "greetings.php", data: "användarnamn =" +$("#användarnamn").val(), framgång: function(html)( $("#content").html(html); ) ));
Ett formulär för att ange ett användarnamn har skapats i dokumentets brödtext. Och en behållare för att ladda dynamiskt innehåll.
Observera att själva formuläret inte har de vanliga åtgärds- och metodfälten. Funktionen $("#myForm").submit() fungerar som hanterare för händelsen att klicka på knappen "Skicka". Låt oss ta en titt på den här funktionen.
$("#myForm").submit(function())( $.ajax((typ: "POST", url: "greetings.php", data: "username="+$("#username").val ( ), framgång: function(html)( $("#content").html(html); ) ));
Som vi kan se är huvudarbetet återigen relaterat till $.ajax()-funktionen. Den här gången visas ytterligare parametrar som inte beaktades i exempel 1 och 2. Nämligen:
Typ: "POST" Dataöverföringstyp. data: "username="+$("#username").val() Parametrar som skickas till servern. I det här fallet skickar vi innehållet i användarnamnsfältet - användarnamnet. I allmänhet skrivs parametrar på samma sätt som i GET-metoden, på en rad, till exempel:
data: "användarnamn=Vasya&age=18&sex=man"
Observera att det finns en rad i slutet:
Returnera falskt; Detta görs för att formuläret inte ska försöka överföra data till filen som det startas från och sidan inte laddas om.
Innehållet i filen greetings.php.
Vi visar hälsningen och räknar antalet tecken i namnet.
Ladda ner exempel på källfiler (16,8 kb):
Avslutningsvis är det värt att säga att förutom de uppenbara fördelarna med att skapa sidor med dynamiskt uppdateringsinnehåll, finns det ett antal nackdelar som bör beaktas när man utvecklar en webbplats, nämligen:
1. På sidor med dynamisk innehållsuppdatering fungerar inte "Tillbaka"-knappen i webbläsaren korrekt.
2. Sidor med dynamiska innehållsuppdateringar ändrar inte webbadresser baserat på deras innehåll, så de kan inte bokmärkas.
3. Sidor med dynamiska innehållsuppdateringar indexeras inte av sökmotorer, eftersom de kör inte JavaScript-kommandon.
Du kan bli av med ovanstående nackdelar programmatiskt. Denna artikel diskuterar inte sådana metoder.
Låt oss säga att jag har en index.html-sida med en navigeringsmeny och jag har 15 andra html-sidor med samma meny.
Är det möjligt om html/css/js uppdaterar EN fil (säg filen index.html) och alla uppdateringar tillämpas på alla 15 dokument?
Jag vet att du kan göra detta med PHP, men sidan jag kör använder inte en PHP-indexfil, så jag letar efter ett annat sätt.
Kanske finns det något annat sätt att uppnå detta? Kanske kantig JS? Några förslag eller länkar som du kan föreslå att läsa/lära sig hur man gör detta?
Prova detta:
document.getElementById("sideBar").innerHTML="";
Kan du använda JQuery? :D
Exempelsida 1:
$(document).ready(function() ( $("#sideBar").load("side_content.html"); ));
Ja - detta är möjligt och ett krav för alla typer av icke-trivial webbplatsstorlek.
Det allmänna sättet att göra saker som detta utan att bli för komplicerade är detta. I dina HTML-filer inkluderar du några mallar. Dessa mallar styr det övergripande utseendet på din webbplats. Alla dina HTML-filer innehåller samma mallar. Om du vill ha något annorlunda på en specifik sida, åsidosätter du dina mallar i den specifika html-filen.
Som ett resultat ser det ut så här:
mitt innehåll här.
I din style.css och din custom.js kan du gå till stadsinställningar. Du kan lägga till fler stilmallar och fler javascript-skript efter behov. De flesta webbplatser har mer stil och javascript än innehåll.
Min favoritsida för att lära mig om dessa tekniker är Mozilla Developer Network, men det finns många andra fantastiska resurser.
Fliksynkronisering är tillgänglig via localStorage och StorageEvent. Du kan hitta mer information på MDN
Efter att ha uppdaterat navigeringen anropar du localStorage.setItem(someKey, someValue) och med window.addEventListener("storage", this.handleStorageEvent) hanterar localStorage-ändringen på andra flikar. Fliken som händelsen avfyrades på kommer inte att sprida lokallagringsändringen.
Hoppas mitt svar hjälpte: 3
du kan göra detta med XML http request... du behöver bara definiera hela navigeringshuvudet, menyn i en fil och komma åt en div på alla sidor...
function includeHTML() ( var z, i, elmnt, file, xhttp; /*slinga genom en samling av alla HTML-element:*/ z = document.getElementsByTagName("*"); för (i = 0; i< z.length; i++) { elmnt = z[i]; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("include-html"); if (file) { /*make an HTTP request using the attribute value as the file name:*/ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /*remove the attribute, and call this function once more:*/ elmnt.removeAttribute("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /*exit the function:*/ return; } } }; includeHTML();
God dag. Den här gången lite mer om JavaScript. Det fanns ett behov av att uppdatera innehållet i ett block genom att trycka på en knapp, utan att ladda om sidan, för att inte göra användaren galen. Tack vare denna lilla anteckning kan du komma ihåg en gång för alla hur du implementerar detta.
Du kan uppdatera inte bara utan också
Först och främst behöver vi ett blockelement. Låt det vara , låt oss skapa det på sidan och tilldela det en unik identifierare som jQuery känner igen det med.
Hej världen
Det är viktigt att förstå att identifieraren måste vara unik på hela sidan, så genom att anropa $(‘#block’) får vi först element på sidan med detta id. Om du behöver ändra innehållet i flera element bör du använda klasser.
Hej världen
|
Hej världen |
Hej världen
Låt som knappar fungerar som en vanlig länk , med stubben href=# . Under normala omständigheter kommer en stubb att återföra användaren till toppen av webbsidan. Vi kommer att bifoga en onclick-händelse till länken, där vi anropar js-funktionen setNewEntry(), som till exempel kommer att få nytt innehåll för vårt blockelement.
Knapp 1
Knapp 2
Knapp 3
Rensa block
returnera falskt; efter att samtalet behövs för att avbryta övergången till webbadressen från href , kommer vi i vårt fall inte tillbaka till toppen av sidan utan kommer att förbli på plats.
Låt oss nu titta på själva funktionen i JS, vi kommer att ändra innehållet i blocket med .html()-metoden. Om vi använder det utan argument, kommer det att returnera det aktuella innehållet i blocket om vi skickar det ett argument, till exempel en sträng, så kommer det att ersätta innehållet i blocket med det. I fall närmare verkligheten skickas metoden en funktion som bearbetar blocket och returnerar nytt innehåll till det. Men för nu kommer vi att begränsa oss till att klara strängen.
function setNewEntry(entry) ( //#block - hitta ett element med identifierare //.block - hitta efter klassnamn $("#block").html(entry); )
Så här kommer webbsidans kod att se ut.
js .html demo
Hej världen
Knapp 1
Knapp 2
Knapp 3
Rensa block
function setNewEntry(entry) ( //#block - hitta ett element med identifierare //.block - hitta efter klassnamn $("#block").html(entry); ) Exempel på att skicka en funktion till metoden.html().
Jag kom på en mycket enkel funktion som kommer att samla vår historia av knappklick och rensa den när vi vill. Tillräckligt för demonstration.
function setNewEntry(entry) ( $("#block").html(getNewEntry($("#block").html(), entry)); ) function getNewEntry(oldHTML, newHTML) ( if(newHTML == "" ) return newHTML else return oldHTML + newHTML;
SlutsatsTja, det är allt, om du tittar på det är det inte komplicerat, men med hjälp av denna metod kan du åstadkomma "stora saker" och skapa dynamiska webbsidor för alla smaker. Tack för din uppmärksamhet!
