Primasaja.com: Service WEB, MOBILE & SOFTWARE DEVELOPMENT , ENGINEERING & ARCHITECTURE , DESIGN & CREATIVE , ADMIN SUPPORT , SALES & MARKETING , INSTALASI JARINGAN & KOMPUTER
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang indonesia 15540

Belajar Jquery Ajax Dasar ajaxComplete

0
jaka
Gambar hasil tutorial jquery ajax .ajaxComplete



tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxComplete ". ajax complete ini digunakan untuk daftar apa - apa saja ketika data Ajax berhasil di request.


Tutorial ini akan dibagi menjadi 2 yaitu nativ php dan framework codeigniter


Framework codeigniter


  • buat controller dengan nama Ajaxcomplete dan buat script seperti berikut :



<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxcomplete extends CI_controller {

    function index(){
        $this->load->view('Ajaxcomplete');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}



lalu buat view sesuai dengan $this->load->view('Ajaxcomplete'); yaitu berarti buat view Ajaxcomplete.php buat code seperti berikut




<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxcomplete PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body >

    <center><h1>Tutorial Jquery .ajaxComplete PrimaSaja.com</h1></center>

       <button class="primasaja">klik saya untuk mengambil data</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$( document ).ajaxComplete(function() {
$( ".pemberitahuan_aktifitas" ).text( "Pemberitahuan bahwa Ajax telah Complete." );
});

$( ".primasaja" ).click(function() {
$( ".hasil_data" ).load( "<?php echo base_url()?>Ajaxcomplete/test1" );
});

}
});
</script>       

</body>

</html>   


selesai silahkan anda coba jalankan dengan mengklik button primasaja dan lihat hasilnya



  • untuk php / html buat ajaxcomplete.php dan isikan seperti berikut :

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxcomplete PrimaSaja.com</title>
<script type="text/javascript" src="asset/js/jquery-1.11.1.min.js"></script>


</head>


<body onload='formpengisian()'> <!-- tambahkan on load function -->

    <center><h1>Tutorial Jquery .ajaxComplete PrimaSaja.com</h1></center>

       <button class="primasaja">klik saya untuk mengambil data</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$( document ).ajaxComplete(function() {
$( ".pemberitahuan_aktifitas" ).text( "Pemberitahuan bahwa Ajax telah Complete." );
});

$( ".primasaja" ).click(function() {
$( ".hasil_data" ).load( "Ajaxcomplete/test1" );
});

}
});
</script>       

</body>

</html>   

lalu buat file lagi dengan nama test1.php dan isikan code seperti berikut :



<?php echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>"; 

?>

silahkan jalankan sekarang :)


www.primasaja.com -

Gambar hasil tutorial jquery ajax .ajaxComplete



tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxComplete ". ajax complete ini digunakan untuk daftar apa - apa saja ketika data Ajax berhasil di request.


Tutorial ini akan dibagi menjadi 2 yaitu nativ php dan framework codeigniter


Framework codeigniter


  • buat controller dengan nama Ajaxcomplete dan buat script seperti berikut :



<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxcomplete extends CI_controller {

    function index(){
        $this->load->view('Ajaxcomplete');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}



lalu buat view sesuai dengan $this->load->view('Ajaxcomplete'); yaitu berarti buat view Ajaxcomplete.php buat code seperti berikut




<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxcomplete PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body >

    <center><h1>Tutorial Jquery .ajaxComplete PrimaSaja.com</h1></center>

       <button class="primasaja">klik saya untuk mengambil data</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$( document ).ajaxComplete(function() {
$( ".pemberitahuan_aktifitas" ).text( "Pemberitahuan bahwa Ajax telah Complete." );
});

$( ".primasaja" ).click(function() {
$( ".hasil_data" ).load( "<?php echo base_url()?>Ajaxcomplete/test1" );
});

}
});
</script>       

</body>

</html>   


selesai silahkan anda coba jalankan dengan mengklik button primasaja dan lihat hasilnya



  • untuk php / html buat ajaxcomplete.php dan isikan seperti berikut :

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxcomplete PrimaSaja.com</title>
<script type="text/javascript" src="asset/js/jquery-1.11.1.min.js"></script>


</head>


<body onload='formpengisian()'> <!-- tambahkan on load function -->

    <center><h1>Tutorial Jquery .ajaxComplete PrimaSaja.com</h1></center>

       <button class="primasaja">klik saya untuk mengambil data</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$( document ).ajaxComplete(function() {
$( ".pemberitahuan_aktifitas" ).text( "Pemberitahuan bahwa Ajax telah Complete." );
});

$( ".primasaja" ).click(function() {
$( ".hasil_data" ).load( "Ajaxcomplete/test1" );
});

}
});
</script>       

</body>

</html>   

lalu buat file lagi dengan nama test1.php dan isikan code seperti berikut :



<?php echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>"; 

?>

silahkan jalankan sekarang :)



Tidak Ada Komentar: