Rabu, 12 Agustus 2015
Belajar Jquery Ajax Dasar .ajaxComplete
Belajar Jquery Ajax API .ajaxComplete
Jaka Prima MaulanaSelamat datang pengunjung primasaja.com,
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<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>
- 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 :<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>
<?php echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
?>
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar