HTML form verilerini kullanarak bir JSON nesnesi nasıl gönderilir

129

Bu yüzden şu HTML formuna sahibim:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Bir kullanıcı gönder'i tıkladığında bu formun verilerini bir JSON nesnesi olarak sunucuma göndermenin en kolay yolu hangisidir?

GÜNCELLEME: Bu kadar ileri gittim ama işe yaramıyor gibi görünüyor:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

Neyi yanlış yapıyorum?

— kstratis
kaynak

1

Bir göz atın $.ajaxve serializejQuery API.

— Rory McCrossan

1

Kesinlikle bir JSON nesnesi olmak zorunda mı? Nesne hangi yapıya sahip olmalıdır?

— Anthony Grist

1

@AnthonyGrist Evet, bir JSON olmalı çünkü bir ReST servisine yönelik.

— kstratis

4

"Çalışmıyor gibi görünüyor" ne anlama geliyor? Unutmayın, ekranınızı göremiyoruz.

— Dour High Arch

2

@ Konos5 - REST'in JSON ile ilgisi yok. Verilerin belirli bir formatta olmasını gerektirmez.

— DanielM

136

Dizi olarak eksiksiz form verilerini alın ve json dizgeleştirin.

var formData = JSON.stringify($("#myForm").serializeArray());

Daha sonra ajax'ta kullanabilirsiniz. Veya ajax kullanmıyorsanız; gizli metin alanına koyun ve sunucuya aktarın. Bu veriler normal biçimli veriler aracılığıyla json dizesi olarak iletilirse, json_decode kullanarak kodunu çözmeniz gerekir . Daha sonra tüm verileri bir dizide alacaksınız.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

— SachinGutte
kaynak

4

Soruyu jQuery ile etiketlediniz. Yani onu kullanıyor musun? ile $.ajaxbu verileri aktarmak gerçekten çok kolay.

— SachinGutte

51

HTML, form verilerinden JSON oluşturmanın hiçbir yolunu sağlamaz.

Bunu gerçekten istemciden halletmek istiyorsanız, o zaman JavaScript'i kullanarak şunları yapmanız gerekir:

DOM aracılığıyla formdaki verilerinizi toplayın
bir nesne veya dizide organize edin
JSON.stringify ile JSON oluştur
XMLHttpRequest ile POST

application/x-www-form-urlencodedVerilere bağlı kalmak ve bunları JSON yerine sunucuda işlemekten büyük olasılıkla daha iyi olursunuz. Formunuz, JSON veri yapısından yararlanacak karmaşık bir hiyerarşiye sahip değil.

Sorunun büyük ölçüde yeniden yazılmasına yanıt olarak güncelleme…

JS'nizde readystatechange işleyicisi , bu nedenle yanıtla hiçbir şey yapmıyorsunuz
Varsayılan davranışı iptal etmeden gönder düğmesi tıklandığında JS'yi tetiklersiniz. Tarayıcı, JS işlevi tamamlanır tamamlanmaz formu (normal şekilde) gönderecektir.

— Quentin
kaynak

1

Tamam, peki bunu nasıl düzeltebilirim?

— kstratis

1

@Quentin: Benim durumumda, etki alanı kontrolü olmadan etki alanları arası POST'a ihtiyacım var.

— user2284570

1

@ user2284570 - Yeni bir sorunuz varsa, bir tane sorun .

— Quentin

1

enctype='application/json'JSON verilerini oluşturmak için form tanımına ekleme önerisi var w3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE - O sayfayı okudun mu? Çevresinde siyah ve sarı bir tehlike şeridi olan büyük bir kutuda Dikkat edin

— Quentin

3

kodunuz iyidir, ancak hiçbir zaman yürütülmez, çünkü gönder düğmesi [type = "submit"] sadece type = button ile değiştirin

<input value="Submit" type="button" onclick="submitform()">

senaryonuzun içinde; form beyan edilmemiştir.

let form = document.forms[0];
xhr.open(form.method, form.action, true);

— tdjprog
kaynak

Kesinlikle type = "button" çok önemlidir, kullanılmazsa url parametreleri ile yönlendirilir.

— Rohit Parte

1

Geç kaldım ama bir nesneye ihtiyacı olanlar için sadece html kullanarak bir yol olduğunu söylemeliyim. PHP gibi bazı sunucu tarafı çerçevelerinde aşağıdaki kodu yazabilirsiniz:

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="name[last]" id="lname"></p>

        <input value="Submit" type="submit">
    </form>

Dolayısıyla, object[property]bir nesneye sahip olmak için girişin adını ayarlamamız gerekiyor . Yukarıdaki örnekte, aşağıdaki JSON ile bir veri elde ettik:

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}

— orafaelreis
kaynak

0

Şunun gibi bir şey deneyebilirsiniz:

<html>
<head>
    <title>test</title>
</head>

<body>
    <form id="formElem">
        <input type="text" name="firstname" value="Karam">
        <input type="text" name="lastname" value="Yousef">
        <input type="submit">
    </form>
    <div id="decoded"></div>
    <button id="encode">Encode</button>
    <div id="encoded"></div>
</body>
<script>
    encode.onclick = async (e) => {
        let response = await fetch('http://localhost:8482/encode', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
        })

        let text = await response.text(); // read response body as text
        data = JSON.parse(text);
        document.querySelector("#encoded").innerHTML = text;
      //  document.querySelector("#encoded").innerHTML = `First name = ${data.firstname} <br/> 
      //                                                  Last name = ${data.lastname} <br/>
      //                                                  Age    = ${data.age}`
    };

    formElem.onsubmit = async (e) => {
      e.preventDefault();
      var form = document.querySelector("#formElem");
     // var form = document.forms[0];

        data = {
          firstname : form.querySelector('input[name="firstname"]').value,
          lastname : form.querySelector('input[name="lastname"]').value,
          age : 5
        }

        let response = await fetch('http://localhost:8482/decode', {
                method: 'POST', // or 'PUT'
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
        })

        let text = await response.text(); // read response body as text
        document.querySelector("#decoded").innerHTML = text;
    };
</script>
</html>

— Hasan A Yusuf
kaynak