Selasa, 11 Agustus 2015
Jquery Ajax API .Load Tutorial Meload Data Server Ke Element Tujuan
Label:
CodeIgniter
,
Javascript
,
Jquery
,
Php
Jquery Ajax API .Load Tutorial Meload Data Server Ke Element Tujuan
Jaka Prima MaulanaSelamat datang pengunjung primasaja.com,
tutorial primasaja.com kali ini admin akan membagikan bagaimana cara untuk " Meload Data Server Ke Element Tujuan ", sebagai gambaran sederhana apa yang akan kita lakukan adalah anda akan dapat menempatkan localhost/jqueryajaxapi/data1 dari url lain ke dalam localhost/jqueryajaxapi pada spesifikasi element css yang anda tuju
struktur dasar pembuatan API .load ini adalah
.load (url [,data] [,complete])
apa yang akan kita lakukan sekarang adalah cara yang paling simple untuk mengambil data dari server sama saja seperti .get (url , data , sukses) kecuali jika dengan method global.
1. Jquery Ajax API .Load URL
mari mulai membuat .load dan mengambil data dari server dari hal yang paling simple berikut ini :catatan buat folder baru di dalam htdocs adalah tutorialjqueryprimasaja
untuk framework
1. buat controller
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Inti extends CI_controller {
function index(){
$this->load->view('index');
}
}
untuk yang bukan framework langsung aja yang bawah dan hapus yang saya hitamkan :
script :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html><head>
<title>Tutorial Jquery ajax .load PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var site = "<?php echo site_url()?>"; //ganti sama localhost/tutorialjqueryprimasaja/
function fungsibody(){
$('#Dasar').load('<?php echo base_url();?>data1/', function(){alert("proses pengiriman data dari server berhasil");});
}
</script>
<style>
#dasar{background-color: rgba(255, 197, 78, 1);
margin-bottom: 100px;
width: 800px;
height: auto;
}
#dasar2{background-color: blue;
margin-bottom: 300px;
width: 800px;
height: auto;
}
#dasar3{background-color: red;
margin-bottom: 500px;
width: 800px;
height: auto;
}
</style>
</head>
<body onload='fungsibody()'>
<center><h1>Tutorial Jquery ajax .load PrimaSaja.com</h1></center>
<div id='Dasar'>
</div>
<div id='Dasar2'>
</div>
<script>
$('#Dasar2').load('<?php echo base_url();?>data2 #Dasar3');
</script>
</body>
</html>
lalu buat controller baru dengan nama Data1 seperti dibawah ini
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Data1 extends CI_controller {
function index(){
echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data1 </br> di http://localhost/tutorialjqueryprimasaja/";
}
untuk php buat file data1.php dan isikan seperti berikut
<?php echo "halo anda sedang melihat data dari
http://localhost/tutorialjqueryprimasaja/data1 </br> di
http://localhost/tutorialjqueryprimasaja/"?>
lalu buat lagi controller baru dengan nama Data2 seperti dibawah ini
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Data2 extends CI_controller {
function index(){
echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 </br> di http://localhost/tutorialjqueryprimasaja/";
echo "<div id='Dasar3'>
halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 yang hanya mengambil dari div Dasar3
</div>";
untuk php buat file data2.php dan isikan seperti berikutclass Data2 extends CI_controller {
function index(){
echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 </br> di http://localhost/tutorialjqueryprimasaja/";
echo "<div id='Dasar3'>
halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 yang hanya mengambil dari div Dasar3
</div>";
<?php echo "halo anda sedang melihat data dari
http://localhost/tutorialjqueryprimasaja/data2 </br> di
http://localhost/tutorialjqueryprimasaja/"?>
catatan : taruh jquery script di C:\xampp\htdocs\namafolderanda\asset\js\jquery-1.11.1.min.js.
script jquery bisa di dapat dari sini klik disini
script jquery bisa di dapat dari sini klik disini
silahkan cek hasilnya penjelasan hasil tersebut adalah ketika body onload mengambil fungsi dari script fungsibody() yang berisi :
$('#Dasar').load('<?php echo base_url();?>data1/', function(){alert("proses pengiriman data dari server berhasil");});
maka :
<div id='Dasar'>
//isi datanya akan masuk kesini
</div>
akan berisi data dari url yang anda tuju yaitu localhost/tutorialjquery/data1/ dan fungsi yang dibuat juga dapat dipanggil yaitu pemberitahuan function(){alert("proses pengiriman data dari server berhasil");
lalu pada script css kita mencoba menaruh data dari url lain yang lebih spesifik yaitu data yang berada pada div dasar3 sesuai dengan script
localhost/tutorialjquery/data2/
localhost/tutorialjquery/data2/
<div id='Dasar2'>
// isi data dari url lain <div id=dasar3></div>
</div>
// isi data dari url lain <div id=dasar3></div>
</div>
jika masih bingung silahkan kirim email anda ke jaka@primasaja.com untuk mendapatkan link download hasil belajar sekian :)
Langganan:
Posting Komentar
(
Atom
)
Tidak ada komentar :
Posting Komentar