JavaScript ile POST İsteği Gönderme Örneği

Bu örnekte, JavaScript kullanarak bir POST isteği nasıl gönderilir öğreneceksiniz. İşlem, bir HTML formu ile kullanıcının adını ve e-posta adresini girip sunucuya göndererek gerçekleştirilir.

Bu örnek, kullanıcının form üzerinden girdiği verileri JSON formatında bir POST isteği ile sunucuya göndermeyi gösterir. JavaScript kullanarak XMLHttpRequest nesnesi oluşturulur, form verileri alınır, JSON formatına çevrilir ve sunucuya gönderilir. Sunucudan gelen cevap da işlenir ve kullanıcıya gösterilir.

 

HTML Kodu Açıklaması: HTML formu, kullanıcıdan adını ve e-posta adresini girmesini isteyen basit bir kullanıcı arayüzü oluşturur.

<!DOCTYPE html>
<html>
<head>
    <title>POST İsteği Örneği</title>
</head>
<body>
    <h1>Ad ve E-Posta Gönderimi</h1>
    <form id="myForm">
        <label for="name">Adınız:</label>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">E-Posta Adresiniz:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <input type="submit" value="Gönder">
    </form>

    <div id="result"></div>

    <script>
        // JavaScript kodu buraya eklenecek
    </script>
</body>
</html>

JavaScript Kodu Açıklaması: JavaScript kodu, form gönderimini dinler, form verilerini alır, bir POST isteği oluşturur, sunucuya gönderir, ve sunucudan gelen cevabı işler. Burada kullanılan URL, gerçek bir sunucu URL'siyle değiştirilmelidir.

<script>
    document.getElementById("myForm").addEventListener("submit", function (event) {
        event.preventDefault(); // Formun otomatik olarak sayfayı yenilemesini engellemek için

        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;

        // POST isteği yapmak için bir XMLHttpRequest nesnesi oluşturun
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/your-api-endpoint-url", true);
        xhr.setRequestHeader("Content-Type", "application/json");

        // Gönderilecek verileri JSON formatına çevirin
        var data = JSON.stringify({ name: name, email: email });

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                document.getElementById("result").innerHTML = "Sunucudan gelen cevap: " + response.message;
            }
        };

        // Verileri POST isteği ile gönderin
        xhr.send(data);
    });
</script>

Bu JavaScript kodu, formun gönderimini dinler, form verilerini alır, bir POST isteği oluşturur, bu isteği sunucuya gönderir ve sunucudan gelen cevabı işler. your-api-endpoint-url yerine gerçek bir API URL'sini kullanmalısınız.

 

 

Kategoriler