Ajax post işleminde yükleniyor animasyonu - R10.net
  • 01-09-2019, 13:49:26
    #1
    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
    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
    Fikirlerinizi koda dökmek için mesaj atabilir veya 0538 632 7494 üzerinden bana ulaşabilirsiniz
  • 01-09-2019, 14:07:30
    #3
    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
    khufu adlı üyeden alıntı
    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
    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.