Modern web uygulamalarında kullanıcı deneyimini artırmak için Ajax önemli bir rol oynar. Laravel ve jQuery ile beraber Ajax kullanarak form gönderme işlemi, sayfa yenilenmeden veri göndermeyi ve işleme sonucuna göre kullanıcı arayüzünde anında güncellemeler yapmayı mümkün kılar.

Form Oluşturma ve Ajax ile Gönderme

Aşağıda basit bir kullanıcı adı alıp bu bilgiyi Laravel backend'ine gönderen ve sonucu bir HTML elementinde gösteren bir form örneği yer almaktadır:

<form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

<div id="message"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#myForm').submit(function(e){
            e.preventDefault();

            $.ajax({
                type: 'POST',
                url: '/submit-form',
                data: $(this).serialize(),
                success: function(response){
                    $('#message').html(response.message);
                }
            });
        });
    });
</script>

Laravel Backend İşlemleri

Ajax isteği tarafından çağrılan Laravel controller metodunu aşağıdaki gibi oluşturabilirsiniz:

public function submitForm(Request $request)
{
    $name = $request->name;
    // İşleme koy, veritabanına kaydet, vs.
    return response()->json(['message' => 'Form successfully submitted with name: ' + $name]);
}