Menggunakan ajax dasar:
-
Beberapa pengertian dasar dari sisi Server dan sisi klien;
-
Perlu beberapa gagasan javascript(jquery) dasar;
-
Dan beberapa dasar html dan javascript.
Untuk bagian pertama:
Pemrograman sisi server adalah penulisan kode yang berjalan di server, menggunakan bahasa yang didukung oleh server (seperti Java, PHP, C#; dimungkinkan untuk menulis kode yang dijalankan di sisi server dalam JavaScript). Pemrograman sisi klien adalah penulisan kode yang akan dijalankan di klien, dan dilakukan dalam bahasa yang dapat dieksekusi oleh browser, seperti JavaScript, html, dan css.
Untuk yang kedua:
ajax penting untuk mendeklarasikan jQuery Core.
Contoh:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
Gunakan versi terakhir jQuery Core.
Memiliki gagasan tentang siapa AJAX bekerja.
Ajax bekerja melakukan langkah-langkah ini:
- Sebuah peristiwa terjadi di halaman web (halaman dimuat, tombol diklik)
- Sebuah objek XMLHttpRequest dibuat oleh JavaScript
- Objek XMLHttpRequest mengirimkan permintaan ke server web
- Server memproses permintaan
- Server mengirimkan tanggapan kembali ke halaman web
- Respons dibaca oleh JavaScript
- Tindakan yang tepat (seperti pembaruan halaman) dilakukan oleh JavaScript
Untuk lebih banyak Gunakan tautan ini:https://www.w3schools.com/xml/ajax_intro.asp
Konfigurasikan Permintaan:
url:
Ketik:String
Deskripsi:String yang berisi URL tujuan pengiriman permintaan.
data:
Ketik:PlainObject atau String atau Array
Deskripsi:Data yang akan dikirim ke server. Itu dikonversi ke string kueri, jika belum menjadi string. Itu ditambahkan ke url untuk GET-permintaan. Lihat opsi processData untuk mencegah pemrosesan otomatis ini. Objek harus berupa pasangan Kunci/Nilai. Jika nilai adalah Array, jQuery membuat serial beberapa nilai dengan kunci yang sama berdasarkan nilai pengaturan tradisional (dijelaskan di bawah).
dataType (default:Intelligent Guess (xml, json, script, atau html)):
Ketik:String
Deskripsi:Jenis data yang Anda harapkan kembali dari server. Jika tidak ada yang ditentukan, jQuery akan mencoba menyimpulkannya berdasarkan tipe MIME dari respons (tipe XML MIME akan menghasilkan XML, di 1.4 JSON akan menghasilkan objek JavaScript, di 1.4 skrip akan mengeksekusi skrip, dan yang lainnya akan menjadi dikembalikan sebagai string). Jenis yang tersedia (dan hasilnya diteruskan sebagai argumen pertama untuk panggilan balik sukses Anda) adalah:
xml:Mengembalikan dokumen XML yang dapat diproses melalui jQuery.
html:Mengembalikan HTML sebagai teks biasa; tag skrip yang disertakan dievaluasi saat dimasukkan ke dalam DOM.
script:Mengevaluasi respons sebagai JavaScript dan mengembalikannya sebagai teks biasa. Menonaktifkan caching dengan menambahkan parameter string kueri, _=[TIMESTAMP], ke URL kecuali opsi cache disetel ke true. Catatan:Ini akan mengubah POST menjadi GET untuk permintaan domain jarak jauh.
json:Mengevaluasi respons sebagai JSON dan mengembalikan objek JavaScript. Permintaan "json" lintas domain diubah menjadi "jsonp" kecuali jika permintaan tersebut menyertakan jsonp:false dalam opsi permintaannya. Data JSON diuraikan secara ketat; setiap JSON yang cacat ditolak dan kesalahan penguraian dilemparkan. Pada jQuery 1.9, respons kosong juga ditolak; server harus mengembalikan respons null atau {} sebagai gantinya. (Lihat json.org untuk informasi lebih lanjut tentang pemformatan JSON yang tepat.)jsonp:Memuat dalam blok JSON menggunakan JSONP. Menambahkan tambahan "?callback=?" ke akhir URL Anda untuk menentukan panggilan balik. Menonaktifkan caching dengan menambahkan parameter string kueri, "_=[TIMESTAMP]", ke URL kecuali opsi cache disetel ke true.text:String teks biasa.multiple, nilai yang dipisahkan spasi:Pada jQuery 1.5, jQuery dapat mengonversi tipe data dari apa yang diterima di header Tipe-Konten menjadi apa yang Anda butuhkan. Misalnya, jika Anda ingin respons teks diperlakukan sebagai XML, gunakan "text xml" untuk tipe data. Anda juga dapat membuat permintaan JSONP, menerimanya sebagai teks, dan ditafsirkan oleh jQuery sebagai XML:"jsonp text xml". Demikian pula, string singkatan seperti "jsonp xml" pertama-tama akan mencoba mengonversi dari jsonp ke xml, dan, jika gagal, mengonversi dari jsonp ke teks, lalu dari teks ke xml.
ketik (default:'GET'):
Ketik:String
Deskripsi:Metode HTTP yang digunakan untuk permintaan (mis. "POST", "GET", "PUT"). (versi ditambahkan:1.9.0)
sukses:
Ketik:Fungsi (Data apa saja, String textStatus, jqXHR jqXHR )
Deskripsi:Fungsi yang akan dipanggil jika permintaan berhasil. Fungsi melewati tiga argumen:Data yang dikembalikan dari server, diformat menurut parameter tipe data atau fungsi panggilan balik dataFilter, jika ditentukan; string yang menjelaskan status; dan objek jqXHR (dalam jQuery 1.4.x, XMLHttpRequest). Pada jQuery 1.5, pengaturan sukses dapat menerima berbagai fungsi. Setiap fungsi akan dipanggil secara bergantian. Ini adalah Acara Ajax.
Untuk informasi lebih lanjut tentang konfigurasi, gunakan tautan:http://api.jquery.com/jquery.ajax /
Contoh:
AJAX:
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'var1': val_1, 'var2': val_2},
success: function (response) {
$('.search-results').html(response);
}
});
PHP:
$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.
Untuk bagian ketiga dan terakhir:
- Cara memanggil fungsi javascript dari html dan melewati parameter di antara keduanya. Gunakan tautan ini:cara memanggil fungsi javascript dari html dan meneruskan parameter melaluinya
Contoh kerja lengkap:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var var_1 =
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'q': str},
success: function (response) {
if(response.error_state = ""){
document.getElementById("txtHint").innerHTML = response.html;
}
else{
document.getElementById("txtHint").innerHTML = response.response.error_state;
}
}
});
}
}
</script>
</body>
</html>
PHP sisi server (teste.php):
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
//die('Could not connect: ' . mysqli_error($con));
$error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
$html = $html. "<tr>";
$html = $html. "<td>" . $row['FirstName'] . "</td>";
$html = $html. "<td>" . $row['LastName'] . "</td>";
$html = $html. "<td>" . $row['Age'] . "</td>";
$html = $html. "<td>" . $row['Hometown'] . "</td>";
$html = $html. "<td>" . $row['Job'] . "</td>";
$html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
'html'=>$html,
'error_state'=>$error_state
));
?>
</body>
</html>
Ada keraguan, mintalah bantuan saya.
Kerja bagus! Dan jangan lupa untuk menerima jawabannya jika membantu.
