Ajax kullanarak div elementine veri gönderen jquery kodudur.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ajax İle Div Elementine Veri Gönder - jQuery</title>
<meta charset="utf-8" />
<!-- Gerekli dosyaları çağırıyoruz. -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- Bilgi girişini bu textbox'lara yapacağız. -->
<table>
<tr>
<td>Ad</td>
<td><input type="text" name="ad" /></td>
</tr>
<tr>
<td>Soyad</td>
<td><input type="text" name="soyad" /></td>
</tr>
</table>
<!--
Girdiğimiz bilgileri göndermek için kullandığımız buton.
Javascript için butona tıklama olayında çalışacak bir
fonksiyon yazacağız. Bu fonksiyonun adı da veri_gonder();
-->
<input type="button" value="Gönder" onclick="veri_gonder()" />
<!--
Ajax ile yukarıdaki verileri sayfayı yenilemeden
bu divlere getireceğiz.
-->
<br /><br />
<div name="adGelen" class="veri"></div>
<div name="soyadGelen" class="veri"></div>
<script language="javascript" type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
function veri_gonder() {
//ad ve soyad değişkenlerine name değeri "ad" ve
//"soyad" ismine sahip "input" etiketlerinin "value"
//değerlerini alıyoruz. Sizinde bildiğiniz gibi bizim
//gireceğimiz isim ve soyisim input etiketinin value
//kısmı oluyor.
ad = $('input[name="ad"]').val();
soyad = $('input[name="soyad"]').val();
//$.get() fonksiyonu çalışıyor. index.html dosyasındaki
//name değeri "a" olan div etiketinin içine ismi yazdıracak.
$.get('index.html',
{yazi: ad},
function (gelen_cevap) {
$('div[name="adGelen"]').html(ad);
});
//Yine $.get() fonksiyonu çalışıyor. index.html dosyasındaki
//name değeri "s" olan div etiketinin içine soyismi yazdıracak.
$.get('index.html',
{yazi: soyad},
function (gelen_cevap) {
$('div[name="soyadGelen"]').html(soyad);
});
}
style.css
.veri {
width:200px;
height:20px;
border:1px solid #ff0000;
border-radius: 5px;
padding:5px;
text-align: center;
margin-bottom: 5px;
}
table {
border: 2px solid #ddd;
border-radius: 5px;
padding: 5px;
}
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir