0
Kayıt Ol

Ajax post işleminde yükleniyor animasyonu

5

●

333

  • 01-09-2019, 13:49:26
    #1
    fatihbozkurt
    fatihbozkurt
    Kimlik doğrulama veya yönetimden onay bekliyor.
    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>&nbsp;&nbsp;Çı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>
  • 01-09-2019, 13:59:49
    #2
    alisahanyalcin
    alisahanyalcin
    https://fontawesome.com/how-to-use/o...nimating-icons elimde iş var kod kısmına şuan yardımcı olamayacağım ama gif veya farklı bir şey eklemek yerine bu şekilde icon ekleyebilirsiniz
  • 01-09-2019, 14:07:30
    #3
    khufu
    khufu
    beforeSend ve complete yöntemleri sayesinde kolaylıkla yapabilirsin. Aşağıda örneğini yazdım.

    <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,
                  beforeSend :function() // Sunucuya istek gönderilmeden önce neler yapılabileceğini belirler.Mesela bilgi gelene kadar loading animasyon ya da .gif resim gösterebilirsiniz.
                {
                    loadinggoster();
                                       // BURADA BİR FONKSİYON YARDIMIYLA load dosyanı gösterebilirsin.
                },
            success:function(result){            
                    $('#gelenveri').html(result);
                },
            complete :function() // İsteğimizin işlenip sonucunun gelmesiyle ilgili işlemler yapar.Mesela ajax bittiği için loading animasyonunuzu kaldırabilirsiniz.
                {
                    loadingsil();
                                       //Loading animasyonu silebilirsiniz
                }
        });
        
    });
});
</script>
  • 01-09-2019, 18:39:49
    #4
    fatihbozkurt
    fatihbozkurt
    khufu adlı üyeden alıntı: mesajı görüntüle
    beforeSend ve complete yöntemleri sayesinde kolaylıkla yapabilirsin. Aşağıda örneğini yazdım.

    <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,
                  beforeSend :function() // Sunucuya istek gönderilmeden önce neler yapılabileceğini belirler.Mesela bilgi gelene kadar loading animasyon ya da .gif resim gösterebilirsiniz.
                {
                    loadinggoster();
                                       // BURADA BİR FONKSİYON YARDIMIYLA load dosyanı gösterebilirsin.
                },
            success:function(result){            
                    $('#gelenveri').html(result);
                },
            complete :function() // İsteğimizin işlenip sonucunun gelmesiyle ilgili işlemler yapar.Mesela ajax bittiği için loading animasyonunuzu kaldırabilirsiniz.
                {
                    loadingsil();
                                       //Loading animasyonu silebilirsiniz
                }
        });
        
    });
});
</script>
    Sayfaya ekledim butonlara tıklayınca çalıştı. Ancak sayfa açılınca daha butonlara basmadan da sürekli çalışıyor bunu nasıl çözebiliriz?

    <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>Bilgiler</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]-->

<style>
.wait {
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
background-image:url(img/yukle.gif); /* buras yaznn ilk banda bahsettiimiz animasyonu arr */
background-repeat:repeat;
background-position:center;
margin:-100px 0 0 -100px;
    z-index:999;
}
</style>

</head>

<body>


<div class="wait" id="wait"></div>

<!-- 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">Bilgiler</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>&nbsp;&nbsp;Çı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,
beforeSend :function() // Sunucuya istek gönderilmeden önce neler yapılabileceğini belirler.Mesela bilgi gelene kadar loading animasyon ya da .gif resim gösterebilirsiniz.
{

$("#wait").css("display", "block");
},
success:function(result){
$('#gelenveri').html(result);
},
complete :function() // İsteğimizin işlenip sonucunun gelmesiyle ilgili işlemler yapar.Mesela ajax bittiği için loading animasyonunuzu kaldırabilirsiniz.
{

$("#wait").css("display", "none");
}
});

});
});
</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,
beforeSend :function() // Sunucuya istek gönderilmeden önce neler yapılabileceğini belirler.Mesela bilgi gelene kadar loading animasyon ya da .gif resim gösterebilirsiniz.
{

$("#wait").css("display", "block");
},
success:function(result){
$('#gelenveri').html(result);
},
complete :function() // İsteğimizin işlenip sonucunun gelmesiyle ilgili işlemler yapar.Mesela ajax bittiği için loading animasyonunuzu kaldırabilirsiniz.
{

$("#wait").css("display", "none");
}
});

});
});
</script>


</html>
  • 01-09-2019, 19:03:27
    #5
    khufu
    khufu
    Onun içinde,

    <script>
$(document).ready(function(){ // BU SATIRDAN HEMEN SONRA YANİ JQUERY TETİKLENDİKTEN HEMEN SONRA

$("#wait").css("display", "none");  // bu şekilde bağımsız olarak bir kere çağırman lazım ki sayfa yüklenir yüklenmez gizlensin daha sonra işlemlere göre hareket edecektir.

veya
$("#wait").hide(); yap

göstereceğin zaman $("#wait").show(); yaparak gösterirsin işi bitince tekrar hide yapabilirsin.
  • 02-09-2019, 01:28:52
    #6
    fatihbozkurt
    fatihbozkurt
    Teşekkürler