Sayfa yenilenmeden içerik değiştirmek

Anonim 1370 gün önce

1,420 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.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

suphi

1369 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 .

#003823

hector

1370 gün önce

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

#003822

onlywhatchess

1370 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>';

#003815