Kategori arşivi: Ajax

Ajax, Jquery

Sayfaya Jquery Kütüphanesini Ekleme

Yorum yapın

jquery eklemeJquery sayfaya nasıl eklenir?

Kullanışlı bir javascript kütüphanesi olan jquery i yazdığınız web uygulamasına dahil etmek için aşağıdaki kod parçasını sayfanızın header bölümüne ekleyin.

Jquery i sunucunuza direk olarak internet üzerinden de dahil edebilirsiniz, veya sunucunuza indirip de kullanabilirsiniz.

Direk sunucunuzdaki jquery dosyasını kullanmak için http://code.jquery.com/jquery-1.11.1.min.js adresindeki dosyayı veya jquery.com adresindeki son sürümü indirip sunucunuza yükleyin, sunucunuz üzerinden link verin


<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2014/06/jquery-1.11.1.min1.js"></script>
Ajax, Genel, Jquery, Php

Php – Ajax ile post yapmak

Yorum yapın

jquery ajax post

Php ile sayfa yenilemeden ajax kullanımına örnek vereceğim

Örneğimizde 2 tane sayfa oluşturuyoruz;
1-) Php kodlarımızın bulunduğu, veritabanına bağlanıp kayıt eklemeyi sağlayan sayfa(haberekle.php)
2-) Asıl görünecek olan ve ajax kodlarının bulunduğu sayfa(index.htm)

Örneğe başlamadan önce şunu da belirteyim, bu şekilde kullanım sadece mantığı kavramanız içindir, oluşacak güvenlik açıklarını önlemek için php dosyanıza çeşitli filtrelemeler koymanız gerekir, bunlara değinmiyorum

haberekle.php içeriği;


<?php

//haber değişkenine posttan gelen datayı aktardık

$haber = $_POST['haber'];

//haber değişkenindeki değeri veritabanına yazdırdık

mysql_query("insert into haberler (haber) values ('$haber')");

Php tarafında post ile gelen değeri veritabanına yazıyoruz
mysql_query yi kullanmadan önce veritabanı bağlantısı kurmayı unutmayın

index.htm içeriği;


<!doctype html>

<!-- Sayfaya jquery kütüphanesini dahil ediyoruz -->
<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2014/06/jquery-1.11.1.min.js"></script>

<script>

function veritabaninaYaz(){
var deger = $("#inputDeger").val();

$.post("haberekle.php", {haber: haber});

$("#inputDeger").val('');
alert('kayıt gönderildi');

}

</script>
<input type="text" id="inputDeger">
<input type="button" value="Gönder" onclick="veritabaninaYaz();">

JavaScript tarafında text inputta bulunan değeri post ile php sayfasına gönderiyoruz, daha sonra inputtaki değeri silip, ekrana kayıt gönderildi şeklinde uyarı verdiriyoruz

Ajax

Ajax ile div içerisini yenilemek

2 Yorum

ajax

Ajax kullanarak div içeriği nasıl yenilenir?

Ajax ile div tagı içerisindeki alanı yenilemek için aşağıdaki adımları uygulayın.

Aşağıdaki örnekte index sayfamıza reload.php dosyamızı include ediyoruz, reload.php dosyamızın başına kodlarımızı ekliyoruz ve tekrar reload.php dosyasının içerisine responsecontainer adında bir div oluşturuyoruz

Bu div’in içerisine eklediğimiz içerik 4 saniyede bir yenileniyor,

Zaman aralığını değiştirmek için koddaki 4000(4sn anlamında) değerini değiştirin.

<script src="http://www.mehmetcanyegen.com.tr/wp-content/uploads/2012/09/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("reload.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('reload.php&randval='+ Math.random());
}, 4000);
$.ajaxSetup({ cache: false });
});
</script>

Sayfanın bir kısmını sürekli yenilediğinizde veriler önbellekte birikiyor, tarayıcı donmaya başlıyor, bunu önlemek için de aşağıdaki kodu index dosyanızın başına ekleyin.

<?php

header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

?>