Selamlar arkadaşlar, bu yazımda sizlere jquery kütüphanesinin ajax özelliğini ve pushState metodunu  kullanarak sayfayı yenilemeden link yapısını nasıl değiştirilmektedir kod örneğini sizlerle paylaşmak istiyorum.

Ajax ile sayfa yenilenmeden link - url yapısı nasıl değiştirilir?

Selamlar arkadaşlar, bu yazımda sizlere jquery kütüphanesinin ajax özelliğini ve pushState metodunu kullanarak sayfayı yenilemeden link yapısını nasıl değiştirilmektedir kod örneğini sizlerle paylaşmak istiyorum.

Web sitelerinde bulunan linklere tıklandığında ajax ile sayfa yenilenmeden sayfa içeriğini değiştirme işlemlerini yapabiliyoruz. Fakat sayfa içeriği değişmesine rağmen link yapımız değişmiyor.

Link yapımızı değiştirmek için yazmamız gereken bazı kodlar var. Bu kodlar içerisinde bu işllemi gerçekleştiren method ise HTML5 ile gelen pushState metodudur. Bu method ile sayfamızı yenilemeden kolayca linkimizde değişiklik işlemini gerçekleştirebiliyoruz.

Link yapımızın değişmesi ve ajax kullanmamız kullanıcıya hızlı bir web sitesi sunmamıza yardımcı olur.  Şimdi yazmamız gereken kodları aşağıda paylaşıyorum. Jquery kütüphanesini kodlarımıza eklememiz gerekir.

 

<!DOCTYPE HTML>
<html>
<head>
<title>Ajax ile sayfa yenilenmeden url değiştirme</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  body {margin:10px}
  h1 {font-size:20px}
</style>

</head>

<body>

   <h1>Navigation Without Refresh <span></span></h1>
    <h2>Current Page: <span>/</span></h2>
    <ul id="menu-nav">
        <li><a href="/page-1/" title="Pagina 1">Page 1</a></li>
        <li><a href="/page-2/" title="Pagina 2">Page 2</a></li>
        <li><a href="/page-3/" title="Pagina 3">Page 3</a></li>
    </ul>

</body>

</html>

 

Html kodlarının altına url değiştirme işlemleri gerçekleştirdiğimiz aşağıdaki javascript kodlarını yazabilirsiniz.

 

<script>

var setCurrentPage = function(url) {
    $('h2 span').html(url || "/");
    $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
};

$('#menu-nav a').click(function(e){
    e.preventDefault();
    var targetUrl = $(this).attr('href'),
        targetTitle = $(this).attr('title');
    
    $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);
    
    window.history.pushState({url: "" + targetUrl + ""}, targetTitle, targetUrl);
    setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
    $("#menu-nav a").fadeTo('fast', 1.0);
    setCurrentPage(e.state ? e.state.url : null);
};

</script>

 

Yukarıdaki kod yapısında  linkler dinamik olarak yerleştirilmiştir. Bu sizler statik hale isteğinize göre getirip kullanabilirsiniz. Başka bir yazımda görüşmek üzere...

 

Bu Gönderiyi Paylaş

İçerik Hakkında Yorum Yapın

www.000webhost.com