jquery ajax mengelola kondisi

jquery


kali ini di artikel kali ini merupakan lanjutan dari artikel yang kemarin yaitu yang artikel ajax dengan jquery, jadi di artikel sebelumnya saya telah menjelaskan dan eksperimen mengenai cara menggunakan ajax. Kali ini saya akan lanjut lagi membahas mengenai ajax, bahasan kali ini mengenai mengelola kondisi .


Baca juga ajax dengan jquery

Jadi kalo di aritkel sebelumnya setelah ada ajax ada .done(), contohnya

$.ajax().done();

Selain done() ada banyak lagi seperti fail() dan always() . kita akan bahas semuanya.

.done()

Sebelumnya saya telah membahas done(), saya akan ulangi lagi done itu jika berhasil mengirim data maka perintah perintah yang ada di done() ini akan terlaksana . contohnya script yang artikel lalu

tutorial.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar jquery ajax</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#input_tulisan").keydown(function () {
          var name=$("#input_tulisan").val();
          $.ajax({
            method:"GET",
            url   :"proses.php",
            data  :{nama:name}
          }).done(function (data) {
            $(".kotak_tulisan").html(data);
          });
        });
      });
    </script>
    <input type="text"placeholder="Ketikan tulisan"id="input_tulisan">
    <div class="kotak_tulisan"></div>
  </body>
</html>


proses.php

<?php
if(isset($_GET['nama'])){
  echo "nama anda $_GET[nama]";
}
 ?>


.fail()

Yang kedua adalah fail() kalo bisakan data yang di kirim atau singkatnya terjadi error maka akan melakukan perintah peritah yang ada di fail() . Contohnya kita ubah urlnya jadi asal

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar jquery ajax</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#input_tulisan").keydown(function () {
          var name=$("#input_tulisan").val();
          $.ajax({
            method:"GET",
            url   :"osasandflasnfldsnfasd.php",
            data  :{nama:name}
          }).done(function (data) {
            $(".kotak_tulisan").html(data);
          }).fail(function() {
            alert( "error" );
          });
        });
      });
    </script>
    <input type="text"placeholder="Ketikan tulisan"id="input_tulisan">
    <div class="kotak_tulisan"></div>
  </body>
</html>

contoh fail jquery ajax


Kalo yang proses.php tidak di ubah ya . Ketika kita mengetik satu ketikan maka akan ada alert yang tulisanya error , karena urlnya gak ada .

.always()

Kalo always ketika kita sudah selesai mengirim data mau itu berhasil atau gagal maka akan tetap melakukan perintah perintah yang ada di .always() . Contohnya

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Belajar jquery ajax</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#input_tulisan").keydown(function () {
          var name=$("#input_tulisan").val();
          $.ajax({
            method:"GET",
            url   :"proses.php",
            data  :{nama:name}
          }).done(function (data) {
            $(".kotak_tulisan").html(data);
          }).fail(function() {
            alert( "error" );
          }).always(function() {
            alert( "complete" );
          });
        });
      });
    </script>
    <input type="text"placeholder="Ketikan tulisan"id="input_tulisan">
    <div class="kotak_tulisan"></div>
  </body>
</html>


contoh always jquery ajax

Mudah mudahan yang saya jelaskan bisa mudah di pahami . Semoga bermanfaat artikelnya dan yang terakhir sampai jumpa di artikel yang lainnya . Kalo kurang paham bisa di tanyakan atau bisa di ulang lagi tutorialnya, semoga bisa membantu .

Belum ada Komentar untuk "jquery ajax mengelola kondisi"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel