Mengirim data ke server

Siapkan HTML

Buat elemen HTML untuk formulir input dan tombol kirim:

<form id="myForm">
   <input type="text" id="dataInput" placeholder="Masukkan data">
   <button type="submit">Kirim</button>
</form>

Tambahkan jQuery

Pastikan Anda telah menyertakan pustaka jQuery di halaman HTML Anda. Anda dapat mengunduhnya atau menggunakan yang tersedia secara online, seperti dari Google CDN:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Buat Script jQuery

Tambahkan script jQuery untuk menangani pengiriman data ke server:

<script>
   $(document).ready(function () {
       $("#myForm").submit(function (event) {
           // Menghentikan aksi bawaan form
           event.preventDefault();

           // Mengambil nilai dari input
           var inputData = $("#dataInput").val();

           // Kirim data ke server menggunakan AJAX
           $.ajax({
               type: "POST", // Metode HTTP yang digunakan
               url: "server-url.php", // Ganti dengan URL server Anda
               data: { data: inputData }, // Data yang akan dikirim
               success: function (response) {
                   // Tindakan setelah berhasil
                   console.log("Data berhasil dikirim: " + response);
               },
               error: function (xhr, status, error) {
                   // Tindakan jika terjadi kesalahan
                   console.error("Terjadi kesalahan: " + error);
               }
           });
       });
   });
</script>

Server-side (contoh PHP)

Di sisi server, Anda perlu mengelola permintaan POST yang diterima. Berikut contoh sederhana dalam PHP:

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
   $data = $_POST["data"];
   // Lakukan apa yang Anda inginkan dengan data ini, seperti menyimpannya ke database.
   // Kemudian, berikan respons ke klien.
   echo "Data berhasil diterima di server: " . $data;
}
?>

Pastikan Anda mengganti "server-url.php" dengan URL atau skrip server Anda yang sesuai. Dengan ini, Anda akan dapat mengirim data dari formulir Anda ke server menggunakan jQuery dan AJAX.

PREVIOUS
NEXT