Javascript ile Web Sayfasından Veri Okuma

Aşağıdaki HTML kodu ile bir web sayfasının elementlerinden veri okuyup json formatına dönüştürebilirsiniz. Bu tarz işlemler veriyi ajax ile sunucuya gönderirken oldukça kullanışlıdır.

<input type="input" placeholder="İsim girin" id="firstname-input" />
<input type="input" placeholder="Soyisim girin" id="lastname-input" />
<input type="input" placeholder="Telefon girin" id="phone-input" />
<input type="button" value="Json' a Dönüştür" onclick="convertJson();" />
<p id="json-text"/></p>

Aşağıdaki Javascript kodu ise input alanlarına girilen değerleri veri modeli haline getirmektedir.

function convertJson () {
    var firstnameInput= document.getElementById('firstname-input');
    var lastnameInput = document.getElementById('lastname-input');
    var phoneInput = document.getElementById('phone-input');
    var person = {
        firstName: firstnameInput.value,
        lastName: lastnameInput.value,
        phoneNumber: phoneInput.value
    };
    var jsonP = document.getElementById('json-text');
    jsonP.innerText = JSON.stringify(person);
}

Uygulama Alanı

İsim değeri firstName, soyisim değeri lastName, telefon numarası ise phoneNumber özelliğine atanmış ve json formatına dönüştürülmüştür. Bu veri formatı ajax ile sunucuya veri gönderme işlemlerinde oldukça kullanışlıdır. Sunucuda tanımlı veri modelleri ile birebir uyuşma sağlar.