Jquery Ajax ile PHP sayfasından veri cağrılma örnekleri
Jquery ile herhangi bir sayfayı yenilemeden sadece istenilen etiketin içeriğini değistirebiliriz.
Örneğin, aşağıdaki div etikenin içeriğini bütün bir sayfayı yenilemeden AJAX ile herhangi bir içerik ile değiştirebiliriz.
<div class="veri">Bu DIV etiketini değiştir</div>
ajax.php
<?PHP echo 'Bu div etiketi yenisi ile güncellendi.'; ?>
Örnek 1:
<!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>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" onclick="ajaxguncelle();" />
<script>
// kullanımı: ajaxguncelle();
function ajaxguncelle() {
var istek = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html" // xml, json, script, veya html
});
istek.done(function(msg) {
$("#divguncelle").html(msg);
});
istek.fail(function(jqXHR, textStatus) {
alert( "Hata Oluştu: " + textStatus );
});
}
</script>
</body>
</html>
Örnek 2:
ajaxguncelle işlevini biraz daha genelleyelim.
<!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>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" onclick="ajaxguncelle('divguncelle');" />
<script>
// kullanımı: ajaxguncelle('divguncelle');
function ajaxguncelle(selector) {
var istek = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html" // xml, json, script, veya html
});
istek.done(function(msg) {
$("#" + selector).fadeOut().html(msg).fadeIn();
});
istek.fail(function(jqXHR, textStatus) {
alert( "Hata Oluştu: " + textStatus );
});
}
</script>
</body>
</html>
Örnek 3:
Bu örneğimizde input etiketine bir id tayin ettik
<!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>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" id="guncelle"/>
<script type="text/javascript" >
$(document).ready(function(){
$(document).on("click", "#guncelle", function(){
var istek = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html" // xml, json, script, veya html
});
istek.done(function(msg) {
$("#divguncelle").fadeOut().html(msg).fadeIn();
});
istek.fail(function(jqXHR, textStatus) {
alert( "Hata Oluştu: " + textStatus );
});
})
});
</script>
</body>
</html>
Örnek 4:
$.get kullanarak
<!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>Jquery AJAX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
Güncelle butonu tıklanınca div etiketi güncellenecektir:<br />
<div id="divguncelle" style="margin:20px; font-size:24px">Bu div etiketini güncelle.</div>
<input type="button" value="Güncelle" id="guncelle"/>
<script type="text/javascript" >
$(document).ready(function(){
$(document).on("click", "#guncelle", function(){
$.get( "ajax.php", function( msg ) {
$("#divguncelle").fadeOut().html(msg).fadeIn();
});
})
});
</script>
</body>
</html>
Diğer Örnekler:
<script type="text/javascript" >
$(document).ready(function(){
$(document).on("click", "#guncelle", function(){
$.ajax({
url: "ajax.php",
type: "GET",
dataType: "html" // xml, json, script, veya html
}).done(function(msg) {
$("#divguncelle").fadeOut().html(msg).fadeIn();
}).fail(function(jqXHR, textStatus) {
alert( "Hata Oluştu: " + textStatus );
});
});
});
</script>
<script type="text/javascript" >
$(document).ready(function(){
$(document).on("click", "#guncelle", function(){
$.ajax({
url: "ajax.php",
type: "GET",
dataType: "html", // xml, json, script, veya html
success: function(msg){
$("#divguncelle").fadeOut().html(msg).fadeIn();
}
});
});
});
</script>
Yukarıdaki örneklerde de görüldüğü üzere bir HTML etiketinin içeriğini değişik kodlamalar ile Jquery’nin AJAX özelliğini kullanarak değiştirebiliriz.
