Jquery yardımıyla verilerimizi AJAX Post olayıyla PHP dosyamıza işlenmek üzere post edebiliriz. Aşağıdaki örnek kodlarımızda AJAX ile verilerimizi nasıl POST edeceğimizi göreceğiz. Öncelikle yine HTML form elementimizle başlayalım. Verilerimizi POST etmeden önce daha önceki yazılarımızda da gördüğümüz gibi formumuzu kontrol etmeyi ihmal etmeyelim. Daha önce bir firma için yazdığım yazılımdan kodları size aktarıyorum. Burada daha sonraki konularımızda bahsedeceğimiz Twitter Bootstrap Framework’ü kullanılmıştır.


<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-external-link-square"></i>
Müşteri Düzenle
</div>
<div class="panel-body">
<form action="javascript:;" id="customerForm">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
Müşteri Kodu <span class="symbol required"></span>
</label>
<input type="text" placeholder="Müşteri Kodunu Girin" class="form-control" id="cuCode" name="cuCode" value="">
</div>
<div class="form-group">
<label class="control-label">
Ad Soyad <span class="symbol required"></span>
</label>
<input type="text" placeholder="Ad soyad girin" class="form-control" id="cuName" name="cuName" value="">
</div>
<div class="form-group">
<label class="control-label">
Tel <span class="symbol required"></span>
</label>
<input type="text" placeholder="Telefon Girin" class="form-control" id="cuPhone" name="cuPhone" value="">
</div>
<div class="form-group">
<label class="control-label">
Tel 2
</label>
<input type="text" placeholder="Telefon Girin" class="form-control" id="cuPhonee" name="cuPhonee" value="">
</div>
<div class="form-group">
<label class="control-label">
Eposta <span class="symbol required"></span>
</label>
<input type="text" placeholder="Eposta adresi girin" class="form-control" id="cuEmail" name="cuEmail" value="">
</div>
<div class="form-group">
<label class="control-label">
Adress <span class="symbol required"></span>
</label>
<textarea placeholder="Adres girin" class="form-control" id="cuAddress" name="cuAddress"></textarea>
</div>
<div class="form-group">
<label class="control-label">
Açıklama
</label>
<textarea placeholder="Açıklamalar" class="form-control" id="cuDesc" name="cuDesc"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<span class="symbol required"></span> Zorunlu Alanlar
<hr />
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<a id="edit" data-toggle="modal" class="btn btn-blue">
<i class="fa fa-plus"></i>
Kaydet
</a>
</div>
</div>

Javascript kodlarımıza göz atacak olursak. Öncelikle sayfamız yüklendiyse çalışacağını söylüyoruz. yani document.ready ise diyoruz. eğer öyle ise id kısmını atlıyorum form-group class lı divlerimizden has-error class ı varsa siliyoruz. Yani Bir sıfırlama yapıyoruz. Sayfa yeni açılmışsa sıfırdan başlayalım diyoruz. daha sonra edit id sine sahip butonumuza basıldığında alanlarımızı kontrol ediyoruz. Ve ajax kısmına geliyoruz. Bazı kodlar konumuz dışında kalabilir kafanızı karıştırmasın. AJAX kısmında yaptığımız işler;

Sayfaya veri nasıl gönderilecek? POST/GET

Sayfadan gelen cevabın tipi ne olacak? Burada JSON Tercih ediyoruz

Hangi sayfa? Nereye post edeceğiz?

Hangi Veriler? POST ettiğimiz değerler neler

ve Sayfa bize cevap verirse ne yapılacak yani success fonksiyonu


<script>
jQuery(document).ready(function() {
var id = <?=$_GET['id']?>;
$("div.form-group").removeClass("has-error");
$("#edit").click(function() {
$("div.form-group").removeClass("has-error");
var desc = $("textarea#cuDesc").val();
var phonee = $("input#cuPhonee").val();
var code = $("input#cuCode").val();
if (code == "")
{
$("input#cuCode").closest("div.form-group").addClass("has-error");
$("input#cuCode").focus();
return false;
}
var address = $("textarea#cuAddress").val();
if (address == "")
{
$("textarea#cuAddress").closest("div.form-group").addClass("has-error");
$("textarea#cuAddress").focus();
return false;
}
var phone = $("input#cuPhone").val();
if (phone == "")
{
$("input#cuPhone").closest("div.form-group").addClass("has-error");
$("input#cuPhone").focus();
return false;
}
var name = $("input#cuName").val();
if (name == "")
{
$("input#cuName").closest("div.form-group").addClass("has-error");
$("input#cuName").focus();
return false;
}
var email = $("input#cuEmail").val();
if (email == "")
{
$("input#cuEmail").closest("div.form-group").addClass("has-error");
email = "";
$("input#cuEmail").attr("placeholder","Geçerli Bir Eposta Giriniz");
$("input#cuEmail").focus();
return false;
}
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(email))
{
$("input#cuEmail").closest("div.form-group").addClass("has-error");
email = "";
$("input#cuEmail").attr("placeholder","Geçerli Bir Eposta Giriniz");
$("input#cuEmail").val("");
$("input#cuEmail").focus();
return false;
}

// KOntroller tamamsa post edilecek verileri hazırlayalım

var dataString = 'code='+ code + '&name=' + name + '&email=' + email + '&phone=' + phone + '&phonee=' + phonee + '&desc=' + desc + '&address=' + address + '&id=' + id + '&action=edit';

$.ajax({
type: "POST", // GET ya da POST
dataType: "json", // Gelecek Cevabın veri tipi
url: "system/customers.php", // Hangi PHP dosyasına post edilecek
data: dataString, // POST Edilecek veriler
success: function(response) {  // PHP dosyasından gelen cevabı göster
alert(response.msg)
window.setTimeout('location.reload()', 2000); // Sayfayı yenile 2sn sonra
}
});
});
});
</script>