Laravel Ajax Get Post Kullanımı
Hepinize merhaba dostlarım 😊. Pazar günü ufak bir programımın olması sebebiyle ufaktan bir makale yazayım dedim sizlere o günü sıkışmaya almadan hafiften 😉
Bu makalemde dostlarım aslında Laravel ile proje geliştirirken sık sık kullandığım ve sektörde de kullanılan bir yapıdan bahsedeceğim. Sizin aklınızda hemen şu belirecektir
Hocam yoksa composer vs ile jquery kullanmak için bir ayar vs falan mı yapacağız ?
Yok hayır dostlarım o şekilde derin vs bir işlem yapmayacağız. Laravel üzerind eJquery Get - Post işlemleri gerçekleştireceğiz.
Normaldeki kullanımın aksine dostlarım Get isteğinde tamam sıkıntı yok ayarlarız da post işlemi Laravelde biraz meşakkatli bir durum ama gözümüz korkmasın dostlarım hızlıca ayarlayalım bunu 😊
Öncelikle laravel proje ortamımızı kuralım dostlarım ve bize gelen welcome.blade.php içerisini ufak bir düzenleme işleminden geçirelim 😊. Hemen resources/welcome.blade.php içerisini açalım ve içerisine
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Ajax get Post Kullanımı | MFSoftware Blog</title>
<!-- JQUERY CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<h3>Get İsteği</h3>
<input type="text" class="getInput">
<button type="button" class="getButton">Get İsteği Gönder</button>
<script>
/** GET ISTEGI GONDER **/
$(".getButton").click(function () {
var getData = $(".getInput").val();
$.ajax({
type : "GET",
url : "{{ route('get') }}",
data : {
data : getData
},
success : function (e){
console.log(e);
}
});
});
</script>
</body>
</html>
şeklinde kodlarımızı yazdık. Bu kodlarımızı yazdıktan sonra ise dostlarım hemen web.php içerisinde de bu GET isteğimizi yakalamamız için kodlarımızı ayarlayalım. web.php içerisine geliyorum ve içerisine
<?php
use Illuminate\Support\Facades\Route;
// BU BIZE HALI HAZIRDA GELEN METHOD
Route::get('/', function () {
return view('welcome');
});
// GET ISTEGI ROUTE ISLEMI
Route::get('/get',function (\Illuminate\Http\Request $request){
echo "Get Datası: ".$request->data;
})->name('get');
kodlarını yazıyorum. Bu kodlarımızı da yazdıktan sonra dostlarım uygulamamızı çalıştırmak için hepimizin de bildiği üzere
php artisan servekomutunu yazalım. Ekranımıza gelecek olan çıktı
şeklinde bir sonuç dönecektir. Bu kısma kadar tamamız dostlarım. Şimdiiiii bu alana ben geldim ve MFSoftware Blog yazdım. Daha sonra "Get İsteği Gönder" butonuna bastığımda console ekranından karşıma gelecek olan çıktı
Get Datası: MFSoftware Blogolacaktır. Bu kısma kadar tamamız. Şimdi sizin aklınızda olan soru tamamen şudur ki tahmin ediyorum ben de aynı durumlardan geçtim
Şimdi işler karıştı avaba nasıl olacak uzun uzun kod yazcaz galiba :D
Hayır dostlarım asla o şekilde bakmayın bu olaya. Olay çok ama çok basit :). Nasıl diye soracak olursanız dostlarım. Öncelikle şu post methodu gönderme kısmının kodlarını bir ayarlayalım (html kodlarını).
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Ajax get Post Kullanımı | MFSoftware Blog</title>
<!-- JQUERY CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<h3>Get İsteği</h3>
<input type="text" class="getInput">
<button type="button" class="getButton">Get İsteği Gönder</button>
<hr>
<!-- YENI EKLEDIK -->
<h3>Post İsteği</h3>
<input type="text" class="postInput">
<button type="button" class="postButton">Post İsteği Gönder</button>
<script>
/** GET ISTEGI GONDER **/
$(".getButton").click(function () {
var getData = $(".getInput").val();
$.ajax({
type : "GET",
url : "{{ route('get') }}",
data : {
data : getData
},
success : function (e){
console.log(e);
}
});
});
/** POST ISTEGI GONDER (YENI EKLEDIK) **/
$(".postButton").click(function () {
var postData = $(".postInput").val();
$.ajax({
type : "POST",
url : "{{ route('post') }}",
data : {
data : postData
},
success : function (e){
console.log(e);
}
});
});
</script>
</body>
</html>Bu kısımdan dostlarım ayarlamalarımızı yaptık. Daha sonra gelelim dostlarım web.php kısmında ayarlama işlemlerimizi gerçekleştirelim
<?php
use Illuminate\Support\Facades\Route;
// BU BIZE HALI HAZIRDA GELEN METHOD
Route::get('/', function () {
return view('welcome');
});
// GET ISTEGI ROUTE ISLEMI
Route::get('/get',function (\Illuminate\Http\Request $request){
echo "Get Datası: ".$request->data;
})->name('get');
// POST ISTEGI ROUTE ISLEMI (YENI EKLEDIK)
Route::post('/post',function (\Illuminate\Http\Request $request){
echo "Post Datası: ".$request->data;
})->name('post');
şeklinde kodlarımızı yazdık dostlarım. Ekranımıza gelecek olan çıktı
şeklinde karşımıza sonuç geldi dostlarım. Şimdiiiii Post isteği yazan bölümde input içine "MFSoftware Blog" yazdım. Daha sonrasında "Post İsteği Gönder" butonuna bastığımda console ekranında karşıma gelecek olan sonuç
Failed to load resource: the server responded with a status of 419 (unknown status)olacaktır. Bu kısımda işte bize diyor ki
Dostum sen Jquery ajax atacaksın iyi hoş da sen bu verilerin gönderilme esnasında csrf token oluşturmadın özellikle de POST işleminde. Bunu ayarlarsan sevinirim 🙃
şeklinde bir söylemde bulunuyor. Pekiiiiiii biz ne yapacağız ?
Öncelikle dostlarım aşağıda verdiğim
<meta name="csrf-token" content="{{ csrf_token() }}">kodunu "<head></head>" tagleri arasına ekleyin dostlarım. Bunu yaptıktan sonra dostlarım diğer bir kod olan
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});kodlarını da JQuery kodlarını yazdığımız "<script></script>" bölümünün en başına ekliyoruz. Bunu da ayarladıktan sonra ise sayfamızı açıyoruz ve ekranımıza gelip post gönderm inputuna "MFSoftware Blog" yazalım ve tekrardan Post İsteği Gönder tuşuna basalım. Console ekranında karşımıza gelecek olan çıktı
Post Datası: MFSoftware Blogşeklinde sonuç çıkacaktır ve Bingooooo bütün işlemler başarılı 💯. Laravel üzerinde ajax işlemlerinin ayarlanmasını gerçekleştirdik 😊.
Eveeeeet dostlarım 😊. Bu yazımda sizlere elimden geldiğince dilim döndüğünce "Laravel üzerinde Jquery Get Post Kullanımı" başlıklı yazımı anlattım. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum. Özellikle öğrenme sürecinde bu ve bunun gibi durumların olması doğaldır. Sizlerden bu süreç içersinde istediğim tek şey her yazımda da değindiğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız :)". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır 😊
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun. Onu da taşıdım 😀. Hatta taşıma süreci en meşakkatli olan site buydu ama değdi de güzel deneyim kattı bana 😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer