Metode $.get() dan $.post() digunakan untuk melakukan transaksi data HTTP antara klien peramban dan server backend PHP/Node.js secara asinkron.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
.form-card { background: white; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; max-width: 400px; }
input { width: 100%; padding: 8px 12px; margin: 8px 0 15px; border: 1px solid #cbd5e1; border-radius: 6px; box-sizing: border-box; }
button { width: 100%; background: #00758f; color: white; border: none; padding: 10px; border-radius: 6px; font-weight: bold; cursor: pointer; }
.notif { margin-top: 15px; padding: 12px; border-radius: 6px; display: none; font-size: 14px; }
</style>
</head>
<body>
<div class="form-card">
<h3 style="margin-top:0; color:#0d2e5c;">Kirim Pesan Cepat</h3>
<label>Nama Lengkap:</label>
<input type="text" id="txtNama" placeholder="Masukkan nama Anda...">
<label>Pesan Masukan:</label>
<input type="text" id="txtPesan" placeholder="Tuliskan pesan...">
<button id="btnSubmit">Kirim via $.post()</button>
<div id="hasilNotif" class="notif"></div>
</div>
<script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
const nama = $('#txtNama').val();
const pesan = $('#txtPesan').val();
if(!nama || !pesan) {
alert('Harap isi semua kolom formulir!');
return;
}
$('#hasilNotif').hide().text('Mengirim ke server...').css({'background':'#e2e8f0', 'color':'#334155'}).fadeIn();
// Simulasi pemanggilan $.post("simpan_pesan.php", { nama: nama, pesan: pesan }, callback)
setTimeout(function() {
$('#hasilNotif').css({'background':'#dcfce7', 'color':'#15803d'})
.html('<strong>✅ Pesan Terkirim!</strong><br>Terima kasih ' + nama + ', server merespons 200 OK.');
$('#txtNama, #txtPesan').val('');
}, 500);
});
});
</script>
</body>
</html>Masukkan nama dan pesan, lalu tekan kirim untuk menguji simulasi pengiriman data AJAX.