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

Jquery Ajax API Load Tutorial Meload Data Server Ke Element Tujuan

0
jaka



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');

    }

}


2. lalu buat view seperti berikut :

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 berikut

<?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


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/ 


  <div id='Dasar2'>
// 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 :)

www.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');

    }

}


2. lalu buat view seperti berikut :

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 berikut

<?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


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/ 


  <div id='Dasar2'>
// 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 :)

"

Tidak Ada Komentar: