index.html olarak kaydet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!--çok kolay bir şekilde ajax kullanmamızı sağlayan jquery kütüphanesini projemize entegre ediyoruz-->
</head>
<body>
<form id="hesapform" method="POST" action="ajax.php"> <!--id'si hesapform olan formumuzu oluşturuyoruz-->
<input id="s1" name="s1"> <!--ismi ve id'si s1 olan input koyuyoruz-->
<input id="s2" name="s2"> <!--ismi ve id'si s2 olan input koyuyoruz-->
<input id="topla" name="topla" value="submit" type="submit"> <!--ismi ve id'si topla olan submit butonunu koyuyoruz-->
</form>
<div id="sonuc">
</div>
<script type="text/javascript"> <!--javascript kodumuzu yazmaya başlıyoruz-->
jQuery(document).ready(function(){
$('#hesapform').submit(function(){ //id'si hesapform olan formumuz için submit eventini yakalıyoruz
$.ajax({ //jquery içindeki ajax fonksiyonunu çağırıyoruz
type: "GET", //ajax kullanırkken kullanacağımız methodu belirliyoruz
url: "ajax.php", //ajax ile hangi dosyaya bağlanmak istediğimizi belirtiyoruz
data: $('#hesapform').serialize(), //ajax.php dosyamıza hangi argümentlerin yollanacağını seçiyoruz
success: function(ajaxcevap){ //ajax.php dosyasından gelen cevabı ajaxcevap değişkenine atıyor
$('#sonuc').html(ajaxcevap); //id'si sonuc olan divimizin içeriğini gelen cevap yapıyoruz
}
});
return false;
});
});
</script>
</body>
</html>aşağıdakınıde ajax.php olarak kaydet index.html ile yanyana at çalıştır.
<?php
$s1 = $_GET['s1']; //s1'i get methodu ile alıyoruz
$s2 = $_GET['s2']; //s2'i get methodu ile alıyoruz
if ((!($s1==""))or(!($s2==""))) { //iki sayınında boş olup olmadığını kontrol ediyoruz
$sonuc = $s1 + $s2; //iki sayıyı toplayıp sonuc değikenine atıyoruz
echo $sonuc; //sonucu ekrana yazdırıyoruz
}
?>