Dzień dobry. Tym razem trochę więcej o JavaScript. Należało zaktualizować zawartość bloku poprzez naciśnięcie przycisku, bez przeładowywania strony, aby nie doprowadzić użytkownika do szaleństwa. Dzięki tej małej notatce będziesz mógł raz na zawsze zapamiętać, jak to wdrożyć.
Możesz aktualizować nie tylko, ale także
Przede wszystkim potrzebujemy elementu blokowego. Niech tak będzie, utwórzmy go na stronie i przypisajmy mu unikalny identyfikator, po którym jQuery go rozpozna.
Witaj świecie
Ważne jest, aby zrozumieć, że identyfikator musi być unikalny na całej stronie, więc wywołując $('#block') otrzymamy Pierwszy element na stronie o tym identyfikatorze. Jeśli zachodzi potrzeba zmiany zawartości kilku elementów, warto skorzystać z klas.
Witaj świecie
|
Witaj świecie |
Witaj świecie
Niech jako pikolak działa jak zwykły link , z odcinkiem href=# . W normalnych okolicznościach kod pośredniczący powoduje powrót użytkownika na górę strony internetowej. Do linku dołączymy zdarzenie onclick, w którym wywołamy funkcję js setNewEntry(), która np. otrzyma nową treść dla naszego elementu blokowego.
Przycisk 1
Przycisk 2
Przycisk 3
Wyczyść blok
zwróć fałsz;
po wywołaniu potrzebne jest odwołanie przejścia na url z href , w naszym przypadku nie wrócimy na górę strony, lecz pozostaniemy na miejscu.
Przyjrzyjmy się teraz samej funkcji w JS; zmienimy zawartość bloku za pomocą metody .html(). Jeśli użyjemy go bez argumentów, zwróci nam aktualną zawartość bloku; jeśli przekażemy mu jeden argument, na przykład ciąg znaków, to zastąpi nim zawartość bloku. W przypadkach bliższych rzeczywistości do metody przekazywana jest funkcja, która przetwarza blok i zwraca do niego nową treść. Ale na razie ograniczymy się do przekazania ciągu znaków.
Tak będzie wyglądał kod strony internetowej.
wersja demonstracyjna js .html
Witaj świecie
Wymyśliłem bardzo prostą funkcję, która będzie gromadzić naszą historię kliknięć w przyciski i czyścić ją, kiedy tylko chcemy. Wystarczy na demonstrację.
funkcja setNewEntry(entry) ( $("#block").html(getNewEntry($("#block").html(), wpis)); ) funkcja getNewEntry(oldHTML, newHTML) ( if(newHTML == "" ) zwróć nowyHTML; w przeciwnym razie zwróć staryHTML + nowyHTML;
WniosekCóż, to wszystko, jeśli na to spojrzeć, nie jest to nic skomplikowanego, ale za pomocą tej metody można dokonać „wielkich rzeczy” i stworzyć dynamiczne strony internetowe na każdy gust. Dziękuję za uwagę!
Załóżmy, że mam stronę Index.html z menu nawigacyjnym i 15 innych stron HTML z tym samym menu.
Czy jest to możliwe, jeśli html/css/js zaktualizuje JEDNYM plik (powiedzmy plik Index.html), a wszystkie aktualizacje zostaną zastosowane we wszystkich 15 dokumentach?
Wiem, że możesz to zrobić za pomocą PHP, ale strona, którą uruchamiam, nie używa pliku indeksu PHP, więc szukam innego sposobu.
Być może istnieje jakiś inny sposób, aby to osiągnąć? Może kątowy JS? Jakieś sugestie lub linki, które możesz zasugerować do przeczytania/nauczenia się, jak to zrobić?
Spróbuj tego:
document.getElementById("sideBar").innerHTML="";
Czy potrafisz używać JQuery? :D
Przykładowa strona 1:
$(dokument).ready(function() ( $("#sideBar").load("side_content.html"); ));
Tak – jest to możliwe i wymagane w przypadku dowolnej witryny o nietrywialnym rozmiarze.
Ogólny sposób robienia takich rzeczy bez zbytniego skomplikowania jest następujący. W plikach HTML dołączasz kilka szablonów. Szablony te kontrolują ogólny wygląd Twojej witryny. Wszystkie Twoje pliki HTML zawierają te same szablony. Jeśli chcesz, aby na konkretnej stronie było coś innego, nadpisz swoje szablony w tym konkretnym pliku HTML.
W efekcie wygląda to tak:
moja treść tutaj.
W pliku style.css i niestandardowym.js możesz przejść do ustawień miasta. W razie potrzeby możesz dodać więcej arkuszy stylów i więcej skryptów JavaScript. Większość witryn ma więcej stylu i JavaScriptu niż treści.
Moją ulubioną witryną, w której można dowiedzieć się o tych technologiach, jest Mozilla Developer Network, ale jest też wiele innych świetnych zasobów.
Synchronizacja kart jest dostępna poprzez localStorage i StorageEvent. Więcej informacji można znaleźć na stronie MDN
Po zaktualizowaniu nawigacji wywołujesz localStorage.setItem(someKey, SomeValue) i za pomocą window.addEventListener("storage", this.handleStorageEvent) obsłużysz zmianę localStorage na innych kartach. Karta, na której zostało uruchomione zdarzenie, nie będzie propagować zmiany localStorage.
Mam nadzieję, że moja odpowiedź pomogła: 3
możesz to zrobić za pomocą żądania XML http... wystarczy zdefiniować cały nagłówek nawigacji, menu w jednym pliku i uzyskać dostęp do jednego elementu div na wszystkich stronach...
funkcja includeHTML() ( var z, i, elmnt, file, xhttp; /*przeglądaj kolekcję wszystkich elementów HTML:*/ z = document.getElementsByTagName("*"); for (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();
AJAX i jQuery. Dynamiczna aktualizacja treści. Podstawy (zmiany od 01.03.2012)W tym artykule omówiono, czym są AJAX i jQuery oraz przykłady ich użycia.
AJAX to narzędzie do budowania aplikacji internetowych komunikujących się z serwerem w tle. W takim przypadku użytkownik otrzymuje aplikację z dynamiczną aktualizacją treści, bez konieczności ponownego ładowania całej strony.
jQuery to framework JavaScript, biblioteka pozwalająca na wygodniejsze korzystanie z niektórych funkcji JavaScript, takich jak tworzenie efektów wizualnych, obsługa zdarzeń, praca z obsługą DOM i AJAX.
Możesz pobrać najnowszą wersję jQuery i szczegółowo zapoznać się ze wszystkimi funkcjami na stronie programisty: http://www.jquery.com/
W tym artykule przyjrzymy się tylko jednej funkcji biblioteki jQuery, a mianowicie funkcji $.ajax(). Ta funkcja pozwala nam zarówno przesyłać dane do serwera, jak i odbierać odpowiedzi z serwera, wszystko w tle, bez ponownego ładowania strony. Ustawienia odbioru lub transmisji danych zależą od parametrów, z którymi wywoływana jest funkcja $.ajax(). Najważniejsze z nich zostaną omówione poniżej. Więcej o parametrach możesz przeczytać w podręczniku jQuery.
Przejdźmy do rozważenia przykładów.
Ważny!
Aby przykłady działały poprawnie należy:
1. Wszystkie pliki muszą być zapisane w kodowaniu UTF-8.
2. Skrypty powinny być wykonywane na serwerze WWW, a nie uruchamiane w przeglądarce jak plik.
Stwórzmy prosty program wyświetlający aktualny czas, aktualizowany co sekundę za pomocą timera. Cechą tego programu będzie uzyskanie informacji o bieżącym czasie z innego pliku zewnętrznego.
Zawartość pliku indeks.html.
funkcja show() ( $.ajax((url: "time.php", pamięć podręczna: false, sukces: funkcja(html)( $("#content").html(html); ) )); ) $(dokument ).ready(function())( show(); setInterval("show()",1000); ));
Kod ma kilka funkcji, wyjaśnijmy je.
1. Biblioteka jQuery jest zawarta w nagłówku pliku HTML; w tym celu napisano tę linię.
Sam plik jquery.js znajduje się w tym samym folderze, co pliki przykładowe.
2. W treści dokumentu tworzony jest kontener, do którego załadujemy treść.
3. Do poprawnego działania jQuery wymagana jest dziwna na pierwszy rzut oka funkcja $(document).ready(, w której możemy dokonać wszystkich przygotowań do działania programu. W naszym przypadku wywołujemy funkcję show(), która określa mechanizm pobierania treści z innego pliku i ustawiamy timer tak, aby funkcja show() wywoływała się raz na sekundę.
$(dokument).ready(function())( show(); setInterval("show()",1000); ));
4. Funkcja show() polega na wywołaniu funkcji $.ajax() z określoną liczbą parametrów, co pozwala nam na pobranie w tle informacji z zewnętrznego pliku na serwerze.
$.ajax(( url: "time.php", pamięć podręczna: false, sukces: funkcja(html)( $("#content").html(html); ) ));
Przyjrzyjmy się parametrom używanym przez funkcję $.ajax().
Adres URL: "time.php" Dostęp do pliku time.php w celu pobrania zawartości.
pamięć podręczna: false Wyniki zapytania nie są buforowane.
sukces: funkcja(html)( $("#content").html(html); ) Jeśli żądanie się powiedzie, kontrola przechodzi do funkcji, która otrzymuje treść jako parametr i zapisuje jej kontener. Zapis do kontenera następuje w tej linii:
$("#treść").html(html);
Zawartość pliku time.php.
Pobierz przykładowe pliki źródłowe (16,6 kb):
Zawartość pliku indeks.html.
Przykład 2: Dynamiczne aktualizowanie treści na podstawie wyboru użytkownika
Program dynamicznie ładujący treść według uznania użytkownika.Którą stronę chcesz otworzyć?
Zdarzenie kliknięcia przycisku „Strona 1” obsługiwane jest przez funkcję $("#btn1").click(), natomiast zdarzenie kliknięcia przycisku "Strona 2" jest przetwarzane przez funkcję $("#btn2"). funkcja kliknięcia().
Zawartość plików page1.html i page2.html, które są dynamicznie ładowane do obszaru zawartości, to proste strony HTML lub pliki tekstowe zawierające treść.
Pobierz przykładowe pliki źródłowe (18,4 kb):
Spójrzmy na przykład, który wysyła wprowadzoną nazwę użytkownika na serwer. Kiedy serwer odbierze nazwę, wydaje powitanie i zlicza liczbę znaków we wprowadzonej nazwie.
Zawartość pliku indeks.html.
Wpisz nazwę:
$(dokument).ready(function())( $("#myForm").submit(function())( $.ajax(( typ: „POST”, url: „greetings.php”, dane: „nazwa użytkownika =" +$("#nazwa użytkownika").val(), sukces: funkcja(html)( $("#treść").html(html); ) ));
W treści dokumentu utworzono formularz umożliwiający wprowadzenie nazwy użytkownika. Oraz kontener do ładowania treści dynamicznych.
Należy pamiętać, że sam formularz nie zawiera zwykłych pól akcji i metod. Funkcja $("#myForm").submit() służy jako obsługa zdarzenia kliknięcia przycisku "Wyślij". Przyjrzyjmy się tej funkcji.
$("#myForm").submit(function())( $.ajax(( typ: "POST", url: "greetings.php", dane: "username="+$("#username").val ( ), sukces: funkcja(html)( $("#treść").html(html); ) ));
Jak widzimy, główna praca ponownie jest związana z funkcją $.ajax(). Tym razem pojawiają się dodatkowe parametry, które nie zostały uwzględnione w przykładach 1 i 2. Mianowicie:
Typ: „POST” Typ przesyłania danych.
dane: "username="+$("#username").val() Parametry przekazywane do serwera. W tym przypadku przekazujemy zawartość pola username - nazwę użytkownika. Generalnie parametry zapisuje się analogicznie jak w metodzie GET, w jednej linii, np.:
dane: „nazwa użytkownika=Wasia&wiek=18&płeć=mężczyzna”
Pamiętaj, że na końcu znajduje się linia:
Zwróć wartość fałszywą; Dzieje się tak, aby formularz nie próbował przenieść danych do pliku, z którego jest uruchamiany, a strona nie przeładowała się.
Zawartość pliku pozdrowienia.php.
Wyświetlamy powitanie i liczymy ilość znaków w nazwie.
Pobierz przykładowe pliki źródłowe (16,8 kb):
Podsumowując, warto powiedzieć, że oprócz oczywistych zalet tworzenia stron przy użyciu dynamicznej aktualizacji treści, istnieje szereg wad, które należy wziąć pod uwagę przy tworzeniu witryny, a mianowicie:
2. Strony z dynamiczną aktualizacją treści nie zmieniają adresów URL w zależności od ich zawartości, dlatego nie można ich dodawać do zakładek.
3. Strony z dynamiczną aktualizacją treści nie są indeksowane przez wyszukiwarki, ponieważ nie wykonują poleceń JavaScript.
Możesz programowo pozbyć się powyższych wad. W tym artykule nie omówiono takich metod.
