jquery ajax mengelola kondisi
Di Posting Oleh : wandi
Kategori : javascript
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.
Mau liat atau download source code aplikasi premium bisa disini.
Di Posting Oleh : wandi
Kategori : javascript
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>
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>
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 .
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar