Kamis, 13 Agustus 2015
Belajar Jquery Ajax Dasar .ajaxError
Belajar Jquery Ajax API .ajaxError
Jaka Prima Maulana
Selamat datang pengunjung primasaja.com,
tutorial kali ini saya akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxError " ajax error ini adalah jquery yang akan ditampilkan ketika request ajax telah complete tetapi data yang diminta dari server itu tidak ada misalnya didalam localhost/tutorialjquery/ajaxevent kita memanggil data dari localhost/tutorialjquery/ajaxevent/test2 padahal data yang anda punya adalah data localhost/tutorialjquery/ajaxevent/test1 maka ajax error ini perintah - perintah yang muncul ketika data tersebut tidak ada
langsung saja seperti biasa tutorial ini akan dibagi menjadi 2 yaitu php / html dan framework codeigniter
framework codeigniter
1. buat controller Ajaxevent.php dan isikan seperti berikut
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxerror');
}
function test1(){
echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
}
}
2. buat view sesuai view yang sudah kita buat di script kontroller tadi yaitu Ajaxerror.php lalu isikan seperti berikut ini
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial Jquery ajax .Ajaxerror 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 Ajax .ajaxError PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/urlyangandatidakpunya</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>
<script>
$(document).ajaxError(function(){
$(".pemberitahuan_aktifitas").text("maaf data yang anda cari tidak ada");
});
$(".primasaja").on("click", function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya");
});
$( document ).ajaxError(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas" ).append( "</br>ketika anda request link ini data tidak ada " + settings.url);
});
</script>
</body>
</html>
selesai silahkan jalankan kode tersebut<html>
<head>
<title>Tutorial Jquery ajax .Ajaxerror 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 Ajax .ajaxError PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/urlyangandatidakpunya</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>
<script>
$(document).ajaxError(function(){
$(".pemberitahuan_aktifitas").text("maaf data yang anda cari tidak ada");
});
$(".primasaja").on("click", function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya");
});
$( document ).ajaxError(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas" ).append( "</br>ketika anda request link ini data tidak ada " + settings.url);
});
</script>
</body>
</html>
Untuk php Nativ
buat file php / html dengan nama ajaxerror.php lalu buat script seperti ini :<html>
<head>
<title>Tutorial Jquery ajax .Ajaxerror PrimaSaja.com</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxError PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/urlyangandatidakpunya</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>
<script>
$(document).ajaxError(function(){
$(".pemberitahuan_aktifitas").text("maaf data yang anda cari tidak ada");
});
$(".primasaja").on("click", function(){
$(".hasil_data").load("ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya");
});
$( document ).ajaxError(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas" ).append( "</br>ketika anda request link ini data tidak ada " + settings.url);
});
</script>
</body>
</html>
lalu download sesuai dengan script ini
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
download file jquery-1.11.1.min.js disini lalu taruh bersamaan dalam satu folder
silahkan jalankan
penjelasan :
ketika anda mengklik button primasaja maka seperti yang telah di spesifikasikan di dalam javascript diatas $(".primasaja").on("click", function(){
maka hasil_data akan terisi dengan data dari url ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya
karena url itu tidak ada maka $( document ).ajaxError disinilah bekerja dan menampilkan text atau fungsi lainnya
terimakasih telah melihat tutorial saya silahkan kirim email ke saya untuk mendapatkan data tutorial ini ke jaka@primasaja.com
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar