JS ile Post İşlemi
Javascript ile arkaplandan değil direk sayfaya gidecek şekilde veri yollamak istiyorum.
yani a.php deki javascript kodum ile bilgilerimi alıp, b.php ye arka plandan değil direk yönlenerek yollamak istiyorum.
nasıl yapabilirim?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
2 yolla yapabilirsiniz:
1) Veriyi GET Parametresi Olarak Yollamak
Ufak bir bilgi aktarmak istiyorsanız (silindi, güncellendi gibi) a.php'deki link'inizde url parametresine bu veriyi ekleyebilir, b.php'de de yine javascript ile url'i okuyarak parametreleri alabilirsiniz.
Örn:
a.php
<a href="b.php?isim=İlker&sehir=Mersin">İsim ve Şehir verilerini gönder...</a>
b.php
// url'den gelen b.php?isim=İlker&sehir=Mersin verisini parçalayacağız...
// Url'deki parametreler kısmını alalım.
let urlParameters = window.location.search;
// Çıktı: "?isim=İlker&sehir=Mersin"
// Aldığımız veride "?" karakteri varsa bundan sonrasını alalım. Yoksa bi'şey alamayız...
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
// Çıktı: "isim=İlker&sehir=Mersin"
// Parametreleri birbirinden ayırarak bir array elde edelim:
urlParameters = urlParameters.split("&");
// Çıktı: ["isim=İlker", "sehir=Mersin"]
// Bir js objesinde değerleri key-value şeklinde oluşturalım.
const urlParametersObj = {};
urlParameters.map(x=>{
const splitted = x.split("="); // "isim=İlker" -> ["isim", "İlker"]
const key = splitted[0]; // key = "isim"
const value = splitted.length ? splitted[1] : null; // value = "İlker"
if(Array.isArray(urlParametersObs[key]) urlParametersObj[key].push(value);
else urlParametersObj[key] = [value];
});
// Çıktı: urlParametersObj = { "isim": ["İlker"], "sehir": ["Mersin"] }
b.php'deki tüm bu işlemleri bir fonksiyon haline getirirseniz hem bu projenizde hem başka projelerinizde tekrar tekrar kullanabilirsiniz:
const getUrlParameters = function() {
let urlParameters = window.location.search;
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
urlParameters = urlParameters.split("&");
const urlParametersObj = {};
urlParameters.map(x=>{
const splitted = x.split("=");
if(Array.isArray(urlParametersObs[splitted[0]]) urlParametersObj[splitted[0]].push(splitted.length ? splitted[1] : null);
else urlParametersObj[splitted[0]] = [splitted.length ? splitted[1] : null];
});
return urlParametersObj;
}
// Kullanırken:
var urlParameters = getUrlParameters();
console.log(urlParameters); // Çıktı: { "isim": ["İlker"], "sehir": ["Mersin"] }
console.log("isim: ", urlParameters.isim[0]); // Çıktı: "İlker"
console.log(Object.keys(urlParameters)); // Çıktı: ["isim", "sehir"]
console.log(Object.values(urlParameters)); // Çıktı: [["İlker"], ["Mersin"]]
console.log(Object.entries(urlParameters)); // Çıktı: [["isim", ["İlker"]], ["sehir", ["Mersin"]]]
Burada value değerlerini dizi olarak almamızın nedeni, aynı key'den birkaç tane gelme ihtimalidir.
Örneğin şu parametreler için: ?isim=İlker&isim=Tayfun&meslek=Yazılım 2 tane isim parametresi var.
Şu sonuç üretilecek: { "isim": ["İlker", "Tayfun"], "meslek": ["Yazılım"] }
2) SessionStorage Kullanmak
Veriyi tarayıcının session storage alanına yazarsınız.
- Veri, post metodunda olduğu gibi, URL'de görünmez.
- Veriyi sadece sonraki sayfada değil, bundan sonra kullanıcının gezdiği her sayfada kullanabilirsiniz. Kullanıcı siteyi kapatana kadar bu veri erişiminize açık olur. Yani veri kullanıcının tarayıcısına kaydedilir.
- GET parametresiyle gönderimdeki gibi belli bir formata uymanız gerekmez. İstediğiniz formattaki bir veriyi (html, json, düz yazı...) string haline getirip tutabilirsiniz.
- Veriyi sadece sonraki sayfada değil, o an bulunduğunuz sayfada da kontrol edebilirsiniz.
Veriyi session storage'a yazmak için ona bir key belirlersiniz. Veriyi string olarak session storage'a yazarsınız.
Veriyi okumak için de session storage'daki key'i kullanırsınız. Eğer json gibi bir veri tuttuysanız veriyi string'ten tekrar json'a çevirmelisiniz.
Örnek:
a.php
<textarea id="gonderilecek-veri" placeholder="Tarayıcıya kaydedilecek veriyi yazın"></textarea>
<button id="gonderici-buton">Verileri tarayıcıya kaydet ve beni b.php'ye yönlendir...</button>
<script>
const $textareaElement = document.getElementById("gonderilecek-veri");
// Butona tıklandığında...
document.getElementById("gonderici-buton").addEventListener("click", function(){
// textarea'daki string'i al.
const data = $textareaElement.value;
// session storage'a "verilerim" key'iyle yaz.
sessionStorage.setItem("verilerim", data);
});
</script>
Diğer sayfalardan veriyi okumak için:
b.php
<div id="kayitli-veriler"></div>
<script>
const $yazilacakElement = document.getElementById("kayitli-veriler");
// session storage'da "verilerim" key'iyle bir kayıt var mı diye kontrol et.
const data = sessionStorage.getItem("verilerim"); // Eğer yoksa null döner.
// Eğer session storage'da "verilerim" key'iyle kayıt bulabilmişsek div'e yazdıralım.
if(!data) $yazilacakElement.value = "Henüz veri kaydedilmemiş!";
else $yazilacakElement.value = data;
</script>
Session storage'a sizin siteniz tarafından yazılmış veriler yalnızca sizin siteniz üzerinden okunabilir.
Yani "Ben session storage'a veri yazarsam başka bir site benim bu verilerimi okuyabilir mi?" diye endişelenmenize gerek yok.
Session storage, kullanıcı sitenizden çıktığı zaman sonlanır. Yani veri günlerce tarayıcıda saklanmaz.
Yine de bu alan kullanıcının bulup düzenleyebileceği bir alandır.
"Sayfayı İncele" > "Application" > "Session Storage" yolunu izleyerek kullanıcı bu veriyi görebilir, değiştirebilir, silebilir.
Yani şifre gibi hassas veriler burada saklanmamalıdır.
Session Storage her zaman string veri tutar. (Belki sayı da tutuyordur.)
Ama siz json veri tutmak istiyorsanız onu da string'e çevirmelisiniz.
Diyelim ki aaa adında bir js objeniz var ve bunu session storage'da saklamak istiyorsunuz:
sessionStorage.setItem("istediğim_bir_key", JSON.stringify(aaa));
Bu veriyi tekrar js objesi halinde almak için ise:
const verim = JSON.parse(sessionStorage.getItem("istediğim_bir_key"));
Veriyi storage'dan silmek istersek:
sessionStorage.removeItem("istediğim_bir_key");
Session storage'da html veri de tutabilirsiniz. Yani js ile bir html kodunu okuyup string olarak session storage'a yazarsınız.
Başka bir sayfada da bu kodu js ile ekrana basarsınız. Bir html kod bloğunu olduğu gibi başka bir sayfaya taşımış olursunuz.
NOT: Tarayıcıdan tarayıcıya farklılık gösterebilir ama Chrome için session storage'da tutabileceğiniz maksimum veri 5 mb'tır.
Eğer kullanıcının tarayıcısında session storage'da tutmaya çalıştığınız toplam veri 5mb'tan fazlaysa kullanıcı hata alır.