Contoh Sederhana Submit Form Dengan jQuery/Ajax
|Shares :

Contoh Sederhana Submit Form Dengan jQuery/Ajax

Ajax sudah sangat populer dikalangan application developer. Hampir semua website besar seperti Facebook, linkedIn dsb menggunakan teknologi ini. Ajax memungkinkan user/developer untuk melakukan aksi lain bersamaan dengan aksi yang sedang dilakukan.

Misalnya saat kita komen di status Facebook, tulisan kita sudah nampak duluan di list komen padahal belum tentu proses nya berhasil. Maka tak jarang saat anda Enter  untuk komen , komen anda sudah masuk ke list lalu muncul pesan error.

Kali ini mari kita buat contoh sederhana mengirim data ke Database dengan Ajax, menggunakan bantuan jQuery.


<!DOCTYPE html>
<html>
<head>
<script src="http://codetrash.com/assets/js/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>Contoh ajax</title>
</head>
<script>
  $(function(){
         
    //ketika submit button d click
    $("#submit-form").click(function(){
         
         //do ajax proses
         $.ajax({
           
           url : "register.php", 
           type: "post", //form method
           data: $("#contoh-form").serialize(),
           dataType:"json", //misal kita ingin format datanya brupa json
           beforeSend:function(){
             //lakukan apasaja sambil menunggu proses selesai disini
             //misal tampilkan loading
             
             $(".loading").html("Please wait....");
             
           },
           success:function(result){
             
             if(result.status){
               
               alert("Selamat, resgistari sukses");
               window.location.href = "http://example.com/index.php";
               
             }else{
               
               alert("harap isi smw inputan");
             }
             
           },
           error: function(xhr, Status, err) {
             
             $("Terjadi error : "+Status);
           }
           
         });
              
       return false;
     })
  
  });
 </script>
<body>
<div> <h2>Register</h2> <form id="contoh-form"> <p>Nama</p> <input type="text" name="nama"> <p>Email</p> <input type="text" name="email"> <p>Password</p> <input type="password" name="password"> <p> <input type="button" value="submit" id="submit-form"> </p> </form> <br> <span class="loading"></span> </div> </body> </html>



Buat file php nya 'register.php'

Misal kita kode register php nya

<?php
$data = $_POST; //Sesuaikan baris Insert bawah ini. Jika pakei php biasa ya pakai itu, //jika pakai frameworj ya pakai metoda Insert pakai framework
$input = $this->db->insert('user',$data);
if($input){
    echo json_encode(array('status'=>true));
}else{
   echo json_encode(array('status'=>false));
}


begitulah kira-kira . Happy Coding !!1


Tags : #ajax #tutorial #php #jquery


SHARES :


Budy K's Avatar

Sains & Teknologi Enthusiast, Software Developer. Check my profile!
> 75% komen akan dibalas. Mohon sabar ya. Simpan halaman ini dan cek kembali lagi

Comments

* Email will not be published


    Privacy .ToS .Contact Us
    © 2017 Teknosains