Sayfamda ajax post işlemi yaparak başka bir sayfadan ilgili div tagına veri çekiyorum. Butona bastığımda verinin gelmesi biraz zaman aldığı için yükleniyor tarzında bir loading efekti eklemek istiyorum. Yardımlarınız için teşekkür ederim.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content="width=device-width, initial-scale=1.0, user-scalable=0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="language" content="Tr">
<link rel="icon" href="../../favicon.ico">
<title>İşemler</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="dist/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dist/css/theme.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">İşlemler</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Anasayfa</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bilgiler <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Bilgi-1</a></li>
<li><a href="#">Bilgi-2</a></li>
<li><a href="#">Genel</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a href="include/cikis.php"><button type="button" class="btn btn-primary navbar-btn btn-sm" style="margin-right:25px; margin-top:8px;"><span class="glyphicon glyphicon-log-out"></span> Çıkış</button></a>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" style="margin-top:100px;">
<div class="row">
<form id="gonderilenform">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-8 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-2 text-center">
<div class="form-group">
<input name="tc" id="tc" type="text" class="form-control" placeholder="TC Kimlik Numarası" required>
</div>
<div class="form-group">
<input name="sifre" id="sifre" type="password" class="form-control" placeholder="Şifre" required>
</div>
</div>
</div>
<div class="row text-center">
<button id="buton" name="buton" type="button" class="btn btn-primary">Kimlik Bilgileri</button>
<button id="buton1" name="buton1" type="button" class="btn btn-primary">Adres Bilgileri</button>
</div>
</form>
<div class="row">
<div id="gelenveri" class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-push-2 col-md-push-2 col-sm-push-2 text-center" style="margin-top:30px;">
</div>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"></script>')</script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
<script>
$(document).ready(function(){
$("#buton").on("click", function(){ // buton idli elemana tıklandığında
var gonderilenform = $("#gonderilenform").serialize(); // idsi gonderilenform olan formun içindeki tüm elemanları serileştirdi ve gonderilenform adlı değişken oluşturarak içine attı
$.ajax({
url:'sistem/kimlik.php', // serileştirilen değerleri ajax.php dosyasına
type:'POST', // post metodu ile
data:gonderilenform, // yukarıda serileştirdiğimiz gonderilenform değişkeni
success:function(result){
$('#gelenveri').html(result);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#buton1").on("click", function(){ // buton idli elemana tıklandığında
var gonderilenform = $("#gonderilenform").serialize(); // idsi gonderilenform olan formun içindeki tüm elemanları serileştirdi ve gonderilenform adlı değişken oluşturarak içine attı
$.ajax({
url:'sistem/adres.php', // serileştirilen değerleri ajax.php dosyasına
type:'POST', // post metodu ile
data:gonderilenform, // yukarıda serileştirdiğimiz gonderilenform değişkeni
success:function(result){
$('#gelenveri').html(result);
}
});
});
});
</script>
</html>