Kamis, 13 Agustus 2015
Belajar Jquery Ajax Dasar AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim
Belajar Jquery Ajax AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim
Jaka Prima Maulana
selamat datang pengunjung primasaja.com,tutorial kali ini akan masih membahas mengenai tutorial jquery ajax event kali ini yaitu tentang " Belajar Jquery Ajax Dasar AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim "
tutorial ini masih sama seperti tutorial sebelumnya jika sebelumnya kita membuat perintah ketika ajax error ketika anda merequest data dari url lain kali ini akan dibahas bagaimana jika url tersebut akan baru akan direquest ajax.
untuk lebih jelasnya langsung saja untuk mempraktekkannya, tutorial ini akan dibagi menjadi 2 bagian yaitu php / html dan framework
framework codeigniter
pada tutorial sebelumnya kita telah membuat controller ajaxevent.php rubah saja view nya ke ajaxsend.php seperti berikut :<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {
function index(){
$this->load->view('Ajaxsend');
}
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 baru dengan nama ajaxsend.php lalu buat kode seperti berikut :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial Jquery ajax .AjaxSend 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 .ajaxSend PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas_send"></div>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>
<div class="pemberitahuan_aktifitas_lengkap"></div>
<script>
$(document).ajaxComplete(function(){
$(".pemberitahuan_aktifitas").text("data berhasil Direquest");
});
$(document).ajaxSend(function(){
$(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});
$(document).ajaxSend(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("</br><div style='background-color:yellow;'>anda sedang merequest link : " + settings.url +"</div>");
});
$(document).ajaxComplete(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("<div style='background-color:red;'>data dengan url :"+ settings.url +" yang anda minta berhasil di request</div>")
});
</script>
</body>
</html>
untuk php / HTML
buat file seperti ini
pertama - tama buat file dengan nama ajaxsend.php dan download file jquery jquery-1.11.1.min.js disini masukkan dalam 1 folder isikan script berikut pada ajaxsend
<html>
<head>
<title>Tutorial Jquery ajax .AjaxSend PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<center><h1>Tutorial Jquery Ajax .ajaxSend PrimaSaja.com</h1></center>
<button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas_send"></div>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>
<div class="pemberitahuan_aktifitas_lengkap"></div>
<script>
$(document).ajaxComplete(function(){
$(".pemberitahuan_aktifitas").text("data berhasil Direquest");
});
$(document).ajaxSend(function(){
$(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});
$(document).ajaxSend(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("</br><div style='background-color:yellow;'>anda sedang merequest link : " + settings.url +"</div>");
});
$(document).ajaxComplete(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("<div style='background-color:red;'>data dengan url :"+ settings.url +" yang anda minta berhasil di request</div>")
});
</script>
</body>
</html>
lalu buat file baru dengan nama test1.php isikan terserah anda
contoh :
<?php echo "ini isi datanya"?>
setelah selesai silahkan jalankan selamat anda berhasil membuat ajax event ketika send data.
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar