v2.3.1
Giriş yap

Sayfa yenilenmeden içerik değiştirmek

Anonim tarafından soruldu ve en son güncellendi

84 defa görüntülendi

Merhaba,

Prototürk gibi header ve menüyü sabit bırakacak şekilde geri kalan içeriği sayfa yenilenmeden değiştirmeyi nasıl sağlayabilirim?
Bunlarla ilgili 1-2 tane kütüphane bulmuştum ama kaybettim.

Cevaplar (3)
onlywhatchess
10 gün önce

AJAX ile yapmak mümkün


<nav>
    <ul>
        <li><a href="#" id="anasayfa">Anasayfa</a></li>
        <li><a href="#" id="iletisim">İletişim</a></li>
        <li><a href="#" id="hakkimizda">Hakkımızda</a></li>
    </ul>
</nav>

<div class="container">
    <h1>Anasafya</h1>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

$('nav ul li a').click(function () {
    $.post('getPage.php',{
        sayfa: $(this).attr('id')
    },function(response) {
        $('.container').html(response);
    });
});

// getPage.php sayfası için
switch($_POST['sayfa']):
    case 'anasayfa':
        include_once 'anasayfa.php';
    break;
    case 'iletisim':
        include_once 'iletisim.php';
    break;
    default:
        include_once 'hakkimizda.php';
endswitch;

// ansayfa.php sayfası için
echo '<h1>Anasayfa</h1>';

// iletisim.php sayfası için
echo '<h1>İletişim</h1>';

// hakkimizda.php sayfası için
echo '<h1>Hakkımızda</h1>';
hector
9 gün önce

Prototürkte nasıl peki bu işlem? Ben bunu da merak ediyorum.

suphi
9 gün önce

merhaba bu işlerm jquery dili ile yaplıyor mantık şu şekilde;
başka bir sayfayı sizin sayfanızda iframe gibi gösteriyor
saniye yi siz de belirleyebilrsiniz
örneğin chat uygulamaları şu şekilde yaplıyor
bir chatbox adlı divin içine chatgeçmişi.html olrak bir dosya sürekli olarak gelmesi lazım bu yüzden yukardaki kod yapılıp geliyor peki sayfa yenilenmeden nasıl post işlemi yapılcak?
oda yine aynı şekilde jquery sayesidne oluyor o kodta şu şekilde

$(document).ready(function () {
                $("#submitmsg").click(function () {
                    var clientmsg = $("#usermsg").val();
                    $.post("post.php", { text: clientmsg });
                    $("#usermsg").val("");
                    return false;
                });

burda da submitmsg tuşuna basılırsa hem usermsg adlı inputun değeri text adında post.php gönderiliyor fakat herhangi bir sayfa yenilenmesi olmuyor bu sırada
eğer usermsg boşsa bu kod çalşımasına da izin vermiyoruz .

Önce Burayı Okuyun!
Cevap yazarken markdown kod yazımını kullanmanız gerekiyor. Nasıl kullanacağınızı bilmiyorsanız buradaki makaleye gözatın!
Cevap yaz