iletişim formu nasıl Ajax json post yapmış mantığını çözemedim yardım
merhabalar kendimce json javascript farklı scriptleri inceleyerek ve tayfun hocanın derslerini izleyerek farklı şeyler öğrenmeye çalışıyorum
Bir web sitesi iletişim formu aşağıdaki şekilde yapmış
formu serialize yapmamışlar formData console.log yapınca boş veriyor url get ancak type: POST kullanılmış
sizden ricam bu yapının php post kısmı nasıl işlenmeli anladığım json dönerek veriler alınıyor
burdaki mantığı çözemedim
url: window.location.pathname+'?cm_islem=form_mesajlar&format=json&form_id=1',
daha iyi anlayabilmem için zor değil ise bu yapıda nasıl bir işlem yapılmalı?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 class="title">İLETİŞİM </h1>
<div class="col-md-7" style="padding-top: 15px;padding-bottom: 15px;">
<form name="CMFormGonder1" onsubmit="return false;">
<div class="form-group">
<label for="exampleInputEmail1">Adınız Soyadınız</label>
<input type="text" name="CMform[Ad Soyad]" class="form-control validate[required]" value="" placeholder="Adınız Soyadınız" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email Adresiniz</label>
<input type="email" name="CMform[Email Adresi]" class="form-control validate[required, custom[email]]" value="" placeholder="Email Adresiniz" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Konu</label>
<input type="text" name="CMform[Konu]" class="form-control validate[required]" value="" placeholder="Konu" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Mesajınız</label>
<textarea class="form-control validate[required]" name="CMform[Mesaj]" rows="6" placeholder="Mesajınız"></textarea>
</div>
<button onclick="CMFormGonder('1');" class="btn btn-dark CMFormButton1">Gönder</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha512-jGsMH83oKe9asCpkOVkBnUrDDTp8wl+adkB2D+//JtlxO4SrLoJdhbOysIFQJloQFD+C4Fl1rMsQZF76JjV0eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert.min.js"></script>
<script>
function CMFormGonder() {
$('.CMFormButton1').attr("disabled", true);
var formData = new FormData($('form[name=CMFormGonder1]')[0]);
$.ajax({
url: window.location.pathname+'?cm_islem=form_mesajlar&format=json&form_id=1',
type: 'POST',
data: formData,
dataType: 'json',
success: function (c) {
$('.CMFormButton1').attr("disabled", false);
if(c.durum){
$('form[name=CMFormGonder1')[0].reset();
swal("Başarılı", c.mesaj["mesaj"], "success");
}else{
swal("Hata!", c.mesaj, "error");
}
},
cache: false,
contentType: false,
processData: false
});
}
</script>
</body>
</html>
Aynı sayfaya post etme, bir ajax.php dosyası oluştur örneğin, kodlarını şu şekilde değiştir
<html>
<head>
</head>
<body>
<h1 class="title">İLETİŞİM </h1>
<div class="col-md-7" style="padding-top: 15px;padding-bottom: 15px;">
<form name="CMFormGonder1">
<div class="form-group">
<label for="exampleInputEmail1">Adınız Soyadınız</label>
<input type="text" name="CMform[Ad Soyad]" class="form-control validate[required]" value="" placeholder="Adınız Soyadınız" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email Adresiniz</label>
<input type="email" name="CMform[Email Adresi]" class="form-control validate[required, custom[email]]" value="" placeholder="Email Adresiniz" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Konu</label>
<input type="text" name="CMform[Konu]" class="form-control validate[required]" value="" placeholder="Konu" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Mesajınız</label>
<textarea class="form-control validate[required]" name="CMform[Mesaj]" rows="6" placeholder="Mesajınız"></textarea>
</div>
<button class="btn btn-dark CMFormButton1">Gönder</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert.min.js"></script>
<script>
$("form[name='CMFormGonder1']").on("submit", function (e) {
e.preventDefault()
let formData = new FormData(this);
$.ajax({
method: "POST",
url: 'ajax.php',
type: 'POST',
data: formData,
dataType: 'json',
beforeSend() {
$('.CMFormButton1').prop("disabled", true)
},
success: response => {
if(response.status){
$(this).trigger("reset")
swal("Başarılı", response.message, "success")
}else{
swal("Hata!", response.message, "error")
}
},
cache: false,
contentType: false,
processData: false
}).always(() => {
$('.CMFormButton1').prop("disabled", false)
})
})
</script>
</body>
</html>
ajax.php de şöyle olabilir genel hatlarıyla
<?php
if (isset($_POST['CMform'])) {
$adSoyad = $_POST['CMform']['Ad Soyad'];
$email = $_POST['CMform']['Email Adresi'];
$konu = $_POST['CMform']['Konu'];
$mesaj = $_POST['CMform']['Mesaj'];
// Burada bu verileri işle
// Başaralılı ise bu kodu çalıştır
$response = [
'status' => true,
'message' => 'Form başarıyla gönderildi'
];
// Başarısız ise bu kodu çalıştır
/*$response = [
'status' => false,
'message' => 'Form gönderiminde hata oluştu'
];*/
// En sonda da bu kodu yazdır
echo json_encode($response);
}
Tabii formdan gelen verileri işleyip yanıtı ona göre vermen gerekiyor