view_kalian.php

<!-- kalian bebas kasih id apa aja -->
<!-- tapi utuk memudahkan sekarang kita kasih id form -->
<form id="form">

    <input type="text" placeholder="username" name="username" id="username">
    <!-- biar ada jarak aja sih jadi pake br-->
    <br>
    <div class="check_username"></div>

    <br><br>
    <input type="password" placeholder="password" name="password" id="password">
    <br>
    <div class="check_password"></div>

    <br><br>
    <!-- Wajib di dalam form -->
    <button type="submit">Login</button>

</form>

<!-- ini sangat wajib di gunakan ya kawan -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
    $('#form').submit(function(event) { //ini adalah event dimana ketika menekan button yang ada di dalam form yang tipe nya submit maka akan menjalankan perintah berikut
        event.preventDefault(); //kalian wajib menambahkan ini agar setiap kalian mengirim data tidak akan me-reload halaman

        var data_post = $(this).serializeArray() // data yang di diambil dari input yang ada di dalam form dengan id="form", kalian juga wajib menambahkan attribut name pada inputnya :) ini WAJIB
        // console.log(data_post)
        $.ajax({
            type: "POST", // Method yang akan digunakan bisa POST, GET, PUT, DELETE, kali ini akan menggunakan POST
            url: "<?php echo base_url("controller_kalian/post_data") ?>", // Alamat Controler kalian yang biasa digunakan di action pada form, kalian juga bisa menggunakan php di dalam javascript
            data: data_post, // Data yang akan kalian kirim
            dataType: "json", //tipe data set saja ke json
            success: function(response) { // jika kalian ingin mengembalikan response dari request nanti akan di terima di sini
                if (response.status) { // check apakah sukses
                    alert("selamat Berhasil Menggunakan Ajax untuk post data !!") // jika sukses maka akan keluar alert
                } else { // jika gagal
                    $.each(response.messages, function(key, value) {
                        $(`.check_${key}`).html(value) // maka memberi tahu user apa saja yang kurang sesuai dengan validasi yang kita lakukan
                    });
                }
            }
        });
    })
</script>