JavaScript istifadə edərək yenidən yükləmədən veb səhifə məzmununu yeniləyin. Bütün sənədlərdə yenilənən bir html elementini yeniləməyin bir yolu varmı? Yenidən yükləmədən səhifə məzmununun yenilənməsi nümunəsi
Yaxşı gün. Bu dəfə bir az daha JavaScript haqqında. İstifadəçini dəli etməmək üçün səhifəni yenidən yükləmədən bir düyməyə basaraq blokun məzmununu yeniləməyə ehtiyac var idi. Bu kiçik qeyd sayəsində bunu necə həyata keçirəcəyinizi birdəfəlik xatırlaya bilərsiniz.
Təkcə yox, həm də yeniləyə bilərsiniz
Əvvəlcə blok elementinə ehtiyacımız var. Olsun, gəlin onu səhifədə yaradaq və jQuery-nin onu tanıdığı unikal identifikator təyin edək.
Salam Dünya
İdentifikatorun olması lazım olduğunu başa düşmək vacibdir unikal bütün səhifədə, ona görə də $(‘#block’) zəng edərək əldə edirik birinci bu id ilə səhifədəki element. Bir neçə elementin məzmununu dəyişdirmək lazımdırsa, siniflərdən istifadə etməlisiniz.
Salam Dünya
|
Salam Dünya |
Salam Dünya
Qoy kimi düymələr müntəzəm keçid kimi çıxış edir , stub href=# ilə. Normal şəraitdə stub istifadəçini veb səhifənin yuxarısına qaytaracaq. Linkə onclick hadisəsini əlavə edəcəyik, orada js funksiyasını setNewEntry() adlandıracağıq, o, məsələn, blok elementimiz üçün yeni məzmun alacaq.
Düymə 1
Düymə 2
Düymə 3
Bloku təmizləyin
yalanı qaytarmaq; href-dən url-ə keçidi ləğv etmək üçün zəng lazım olduqdan sonra, bizim vəziyyətimizdə səhifənin yuxarı hissəsinə qayıtmayacağıq, lakin yerində qalacağıq.
İndi JS-də funksiyanın özünə baxaq, .html() metodundan istifadə edərək blokun məzmununu dəyişəcəyik. Əgər biz onu arqumentsiz istifadə etsək, o, bizə blokun cari məzmununu qaytaracaq; əgər ona bir arqument ötürsək, məsələn, sətir, onda o, blokun məzmununu onunla əvəz edəcək. Gerçəkliyə daha yaxın olan hallarda, metoda bloku emal edən və ona yeni məzmun qaytaran funksiya ötürülür. Ancaq hələlik biz özümüzü simli keçməklə məhdudlaşdıracağıq.
funksiya setNewEntry(entry) ( //#block - elementi identifikatorla tapın //.block - sinif adına görə tapın $("#block").html(entry); )
Veb səhifənin kodu belə görünəcək.
js .html demo
Salam Dünya
Düymə 1
Düymə 2
Düymə 3
Bloku təmizləyin
funksiya setNewEntry(entry) ( //#block - elementi identifikatorla tapın //.block - sinif adına görə tapın $("#block").html(entry); ) Bir funksiyanın.html() metoduna ötürülməsi nümunəsi
Düymə klikləri tariximizi toplayan və istədiyimiz zaman onu təmizləyən çox sadə bir funksiya ilə gəldim. Nümayiş üçün kifayətdir.
funksiya setNewEntry(entry) ( $("#block").html(getNewEntry($("#block").html(), entry)); ) funksiya getNewEntry(oldHTML, newHTML) (if(newHTML == "" ) newHTML qaytarın; əks halda köhnəHTML + newHTML qaytarın; )
NəticəHamısı budur, baxsanız, mürəkkəb deyil, lakin bu metodun köməyi ilə siz "böyük şeylər" əldə edə və hər zövqə uyğun dinamik veb səhifələr yarada bilərsiniz. Diqqətinizə görə təşəkkürlər!
Tutaq ki, mənim naviqasiya menyusu olan index.html səhifəm var və eyni menyuya malik başqa 15 html səhifəm var.
Əgər html/css/js BİR faylı (məsələn, index.html faylını) yeniləyirsə və bütün yeniləmələr bütün 15 sənədə tətbiq edilərsə, bu mümkündürmü?
Bunu PHP ilə edə biləcəyinizi bilirəm, amma işlətdiyim səhifə PHP indeks faylından istifadə etmir, ona görə də başqa yol axtarıram.
Bəlkə buna nail olmağın başqa yolu var? Bəlkə bucaqlı JS? Bunu necə edəcəyinizi oxumaq/öyrənmək üçün təklif edə biləcəyiniz hər hansı bir təklif və ya link varmı?
Bunu sınayın:
document.getElementById("sideBar").innerHTML="";
JQuery-dən istifadə edə bilərsinizmi? :D
Nümunə Səhifə 1:
$(sənəd).ready(funksiya() ( $("#sideBar").load("side_content.html"); ));
Bəli - bu mümkündür və hər hansı bir qeyri-trivial sayt ölçüsü üçün bir tələbdir.
Çox mürəkkəbləşmədən bu kimi işləri görməyin ümumi yolu budur. HTML fayllarınıza bəzi şablonlar daxil edirsiniz. Bu şablonlar saytınızın ümumi görünüşünü idarə edir. Bütün HTML fayllarınız eyni şablonları ehtiva edir. Müəyyən bir səhifədə fərqli bir şey istəyirsinizsə, həmin xüsusi html faylında şablonlarınızı ləğv edirsiniz.
Nəticədə belə görünür:
məzmunum burada.
Style.css və custom.js-də şəhər parametrlərinə keçə bilərsiniz. Lazım olduqda daha çox stil cədvəli və daha çox javascript skripti əlavə edə bilərsiniz. Əksər saytlarda məzmundan daha çox üslub və javascript var.
Bu texnologiyalar haqqında öyrənmək üçün ən çox sevdiyim sayt Mozilla Developer Network-dür, lakin bir çox başqa böyük resurslar var.
Tab sinxronizasiyası localStorage və StorageEvent vasitəsilə mümkündür. Daha çox məlumatı MDN-də tapa bilərsiniz
Naviqatoru yenilədikdən sonra siz localStorage.setItem(someKey, someValue) adlandırırsınız və window.addEventListener("storage", this.handleStorageEvent) ilə digər tablarda localStorage dəyişikliyini idarə edirsiniz. Tədbirin işə salındığı Tab localStorage dəyişikliyini təbliğ etməyəcək.
Ümid edirəm cavabım kömək etdi: 3
siz bunu XML http sorğusu ilə edə bilərsiniz... sadəcə olaraq bütün naviqasiya başlığını, menyunu bir faylda müəyyənləşdirməlisiniz və bütün səhifələrdə bir div-ə daxil olmalısınız...
funksiyası includeHTML() ( var z, i, elmnt, fayl, xhttp; /*bütün HTML elementlərinin toplusunda dövrə vurmaq:*/ 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 və jQuery. Dinamik məzmun yeniləməsi. Əsaslar (01/03/2012 tarixindən dəyişikliklər)Bu məqalədə AJAX və jQuery-nin nə olduğu haqqında danışılacaq və onlardan necə istifadə olunacağına dair nümunələrə baxılacaqdır.
AJAX arxa planda serverlə əlaqə saxlayan veb proqramlar yaratmaq üçün bir vasitədir. Bu halda, istifadəçi bütün səhifəni yenidən yükləmədən dinamik məzmun yeniləmələri olan bir proqram alır.
jQuery JavaScript çərçivəsidir, vizual effektlərin yaradılması, hadisələrin idarə edilməsi, DOM və AJAX dəstəyi ilə işləmək kimi bəzi Javascript xüsusiyyətlərindən daha rahat istifadə etməyə imkan verən kitabxanadır.
Siz jQuery-nin ən son versiyasını yükləyə və tərtibatçının saytında bütün funksiyalarla ətraflı tanış ola bilərsiniz: http://www.jquery.com/
Bu yazıda biz yalnız bir jQuery kitabxana funksiyasına, yəni $.ajax() funksiyasına baxacağıq. Bu xüsusiyyət bizə səhifəni yenidən yükləmədən həm məlumatları serverə ötürməyə, həm də serverdən cavablar almağa imkan verir. Məlumatların qəbulu və ya ötürülməsi parametrləri $.ajax() funksiyasının çağırıldığı parametrlərdən asılıdır. Əsas olanlar aşağıda müzakirə olunacaq. Parametrlər haqqında daha çox jQuery təlimatında oxuya bilərsiniz.
Nümunələri nəzərdən keçirməyə davam edək.
Vacibdir!
Nümunələrin düzgün işləməsi üçün aşağıdakıları etməlisiniz:
1. Bütün fayllar UTF-8 kodlaşdırmasında yazılmalıdır.
2. Skriptlər veb-serverdə icra edilməli, brauzerdə fayl kimi işləməməlidir.
Taymerdən istifadə edərək saniyədə bir dəfə yenilənən cari vaxtı göstərən sadə proqram yaradaq. Bu proqramın bir xüsusiyyəti başqa bir xarici fayldan cari vaxt haqqında məlumat əldə etmək olacaq.
index.html faylının məzmunu.
function show() ( $.ajax(( url: "time.php", cache: false, uğur: function(html)( $("#content").html(html); ) )); ) $(sənəd ).ready(funksiya())( show(); setInterval("show()",1000); ));
Kodun bir neçə xüsusiyyəti var, gəlin onları izah edək.
1. jQuery kitabxanası HTML faylının başlığına daxil edilmişdir, bu sətir bu məqsədlə yazılmışdır.
jquery.js faylının özü nümunə faylları ilə eyni qovluqda yerləşir.
2. Sənədin gövdəsində məzmunu yükləyəcəyimiz konteyner yaradılır.
3. İlk baxışda qəribə olan $(document).ready() funksiyası jQuery-nin düzgün işləməsi üçün tələb olunur və biz proqramın işləməsi üçün bütün hazırlıqları orada yerinə yetirə bilərik. Bizim vəziyyətimizdə başqa fayldan məzmunun götürülməsi mexanizmini təyin edən show() funksiyasını çağırırıq və şou() funksiyasının saniyədə bir dəfə çağırılması üçün taymer təyin edirik.
$(sənəd).ready(funksiya())( göstər(); setInterval("show()",1000); ));
4. Show() funksiyası $.ajax() funksiyasını müəyyən sayda parametrlərlə çağırmaqdan ibarətdir ki, bu da bizə arxa fonda serverdəki xarici fayldan məlumat əldə etməyə imkan verir.
$.ajax(( url: "time.php", cache: false, uğur: function(html)( $("#content").html(html); ) ));
$.ajax() funksiyasının istifadə etdiyi parametrlərə baxaq.
Url: "time.php" Məzmunu əldə etmək üçün time.php faylına daxil olur. keş: yanlış Sorğu nəticələri keşlənmir. müvəffəqiyyət: function(html)( $("#content").html(html); ) Əgər sorğu uğurlu olarsa, idarəetmə məzmunu parametr kimi qəbul edən və öz konteynerini yazan funksiyaya keçir. Konteynerə yazı bu sətirdə baş verir:
$("#content").html(html);
time.php faylının məzmunu.
time.php faylının məqsədi cari vaxtı ekranda göstərməkdir.
Nümunə mənbə faylları yükləyin (16,6 kb):
İstifadəçinin istəyi ilə məzmunu dinamik şəkildə yükləyən proqram.
index.html faylının məzmunu.
Hansı səhifəni açmaq istərdiniz?
$(sənəd).ready(funksiya())( $("#btn1").click(funksiya())( $.ajax(( url: "page1.html", keş: false, uğur: funksiya(html) ( $ ("#content").html(html); ) )); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", keş : false, uğur: function(html)( $("#content").html(html); ) )); ))) ));Sənədin gövdəsində istifadəçinin istədiyi məzmunu seçdiyi iki düyməyə malik forma yaradılmışdır. Və məzmunu yükləmək üçün konteyner.
"Səhifə 1" düyməsindəki klik hadisəsi $("#btn1").click() funksiyası ilə, "Səhifə 2" düyməsindəki klik hadisəsi isə $("#btn2") tərəfindən işlənir. klik () funksiyası.
Məzmun sahəsinə dinamik şəkildə yüklənən page1.html və page2.html fayllarının məzmunu sadə HTML səhifələri və ya məzmunu olan mətn fayllarıdır.
Nümunə mənbə faylları yükləyin (18,4 kb):
Daxil edilmiş istifadəçi adını serverə göndərən nümunəyə baxaq. Server ad aldıqda, salam verir və daxil edilmiş addakı simvolların sayını hesablayır.
index.html faylının məzmunu.
Adınızı daxil edin:
$(sənəd).ready(funksiya())( $("#myForm").submit(funksiya())( $.ajax(( növü: "POST", url: "greetings.php", data: "istifadəçi adı =" +$("#username").val(), uğur: funksiya(html)( $("#content").html(html); ) ); false qaytarın; )); ));
Sənədin mətnində istifadəçi adının daxil edilməsi üçün forma yaradılmışdır. Və dinamik məzmunu yükləmək üçün konteyner.
Qeyd edək ki, formanın özündə adi fəaliyyət və metod sahələri yoxdur. $("#myForm").submit() funksiyası "Göndər" düyməsinə klikləməklə bağlı hadisə üçün işləyici kimi xidmət edir. Gəlin bu funksiyaya nəzər salaq.
$("#myForm").submit(function())( $.ajax((növ: "POST", url: "greetings.php", data: "username="+$("#username").val ( ), uğur: function(html)( $("#content").html(html); ) )); false qaytarın; ));
Gördüyümüz kimi əsas iş yenə $.ajax() funksiyası ilə bağlıdır. Bu dəfə 1 və 2-ci misallarda nəzərə alınmayan əlavə parametrlər görünür. Məhz:
Növ: "POST" Məlumat ötürmə növü. data: "username="+$("#username").val() Parametrlər serverə ötürülür. Bu halda, istifadəçi adı sahəsinin məzmununu - istifadəçi adını keçiririk. Ümumiyyətlə, parametrlər GET metodunda olduğu kimi, bir sətirdə yazılır, məsələn:
data: "istifadəçi adı=Vasya&yaş=18&cins=kişi"
Nəzərə alın ki, sonunda bir xətt var:
Yalanı qaytarın; Bu, formanın işə salındığı fayla məlumatları ötürməyə çalışmaması və səhifənin yenidən yüklənməsinə yol verməməsi üçün edilir.
greetings.php faylının məzmunu.
Biz salamı göstəririk və addakı simvolların sayını hesablayırıq.
Nümunə mənbə faylları yükləyin (16.8 kb):
Sonda qeyd etmək lazımdır ki, dinamik yeniləmə məzmunundan istifadə edərək səhifələr yaratmağın aşkar üstünlüklərinə əlavə olaraq, bir sayt hazırlayarkən nəzərə alınmalı olan bir sıra çatışmazlıqlar var, yəni:
1. Dinamik məzmunun yenilənməsi olan səhifələrdə brauzerdə "Geri" düyməsi düzgün işləmir.
2. Dinamik məzmun yeniləmələri olan səhifələr məzmununa görə URL-ləri dəyişmir, ona görə də onları əlfəcin etmək olmaz.
3. Dinamik məzmun yeniləmələri olan səhifələr axtarış motorları tərəfindən indeksləşdirilmir, çünki onlar JavaScript əmrlərini yerinə yetirmirlər.
Yuxarıdakı mənfi cəhətlərdən proqramlı şəkildə xilas ola bilərsiniz. Bu məqalədə belə üsullar müzakirə edilmir.
Axtar
Abunəlik
