jQuery:Sayfa yenilenmeden AJAX ile veri eklemek
Başlıktan da anlayacağınız gibi bu yazımda bir form ile sayfa yenilenmeden veri eklemeyi görüceğiz. Veriyi eklemek için dil olarak PHP’yi kullanacağım fakat ASP’de kullansanız mantık aynı.
Öncelikle jQuery ile gelen ajax fonksiyonumuza bir göz atalım;
jQuery.ajax({
type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir
url: 'veri_isle.php',//Verinin gönderileceği sayfa
data: 'veri=verimiz&veri_iki=verimiz_iki',//Sorgu cümlesi
error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri
success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri
});
Şimdi bu kod parçasını kullanarak basitçe verilerimizi veri_isle.php sayfamıza post ediceğiz.
<form id="veri-formu"> <input name="veri"/> - <input name="veri_iki"/> <input type="button" onclick="gonder();" value="Gönder"/> </form> <div id="yazdir"></div>
HTML formumuzu oluşturduk. Şimdide verilerimizi POST methodu ile gönderecek fonksiyonumuzu oluşturalım.
function gonder() {
jQuery.ajax({
type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir
url: 'veri_isle.php',//Verinin gönderileceği sayfa
data: $('#veri-formu').serialize(),
error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri
success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri
});
}
Şimdi burada değinmediğim bir nokta var data: ‘veri=verimiz&veri_iki=verimiz_iki’ bu gördüğünüz kısma tabikide sırayla giriş tanımlayıp daha sonra o girişleri veri yerine yerleştirmeyeceğiz daha kısa bir yolu var.
$('#veri-formu').serialize();
Gördüğünüz kod parçası sayesinde id değeri veri-formu olan formdan giriş (input) isimlerini ve değerlerini (value) okur sonuç olarak aşağıdaki gibi bir sorgu cümlesi oluşturur.
veri=veri isimli girişe(input) girilen veri&veri_iki=veri_iki isimli girişe(input) girilen veri
Şimdide veri_isle.php sayfamızı oluşturalım.
function database($host,$username,$password,$database_name,$set_name){
mysql_connect($host,$username,$password) or die("Hata");
mysql_select_db($database_name) or die("Hata");
mysql_query("SET NAMES '".$set_name."'");
}
//Database fonksiyon bitti.
database("localhost","root","1234","vt adı","latin5");
//Veritabanıma bağlandım.
$veri = mysql_real_escape_string($_POST["veri"]);
$veri_iki = mysql_real_escape_string($_POST["veri_iki"]);
//Get ile gelen verimi aldım. Fakat ' şeklindeki karakterleri etkisiz hale getirmesini istedim.
$sql = "INSERT INTO tablonuz (veri,veri_iki) VALUES ('$veri','$veri_iki')" ;
@mysql_query($sql) or die("Hata algılandı");
Bu sayfada verilerimi post ile aldım ve veritabanıma ekledim. Şimdi sayfaların son hallerine bakalım;
index.php sayfamız;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery:Sayfa yenilenmeden AJAX ile veri eklemek</title>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
function gonder() {
jQuery.ajax({
type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir
url: 'veri_isle.php',//Verinin gönderileceği sayfa
data: $('#veri-formu').serialize(),
error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri
success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri
});
}
</script>
</head>
<body>
<form id="veri-formu">
<input name="veri"/> - <input name="veri_iki"/>
<input type="button" onclick="gonder();" value="Gönder"/>
</form>
<div id="yazdir"></div>
</body>
</html>
veri_isle.php sayfamız;
function database($host,$username,$password,$database_name,$set_name){
mysql_connect($host,$username,$password) or die("Hata");
mysql_select_db($database_name) or die("Hata");
mysql_query("SET NAMES '".$set_name."'");
}
//Database fonksiyon bitti.
database("localhost","root","1234","vt adı","latin5");
//Veritabanıma bağlandım.
$veri = mysql_real_escape_string($_POST["veri"]);
$veri_iki = mysql_real_escape_string($_POST["veri_iki"]);
//Get ile gelen verimi aldım. Fakat ' şeklindeki karakterleri etkisiz hale getirmesini istedim.
$sql = "INSERT INTO tablonuz (veri,veri_iki) VALUES ('$veri','$veri_iki')" ;
@mysql_query($sql) or die("Hata algılandı");
Vermiş oldugunuz bilgi için teşekur ederım yalnız bir yardımda bulunmanızı ısterim sipariş bolumunde miktar test kutum var onun ıcıne girdigim adet sayısını guncelle dediğimde veri güncelme sayfasında güncelliyor yanlız sayfa yenılenmedıgınden toplam tutar degısmıyor ancak f5 yaptıgımda dogrusunu yazıyor sıte yenile olmadıgıdan boyle bır sıkıntım var yardımcı olursanız sevınırım bu toplamı nasıl yenısnı yazdırırım iyi akşamlar