Cara mengirim objek JSON menggunakan data formulir html

129

Jadi saya mendapatkan formulir HTML ini:

<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>

Manakah cara termudah untuk mengirim data formulir ini sebagai objek JSON ke server saya saat pengguna mengklik kirim?

PEMBARUAN: Saya telah melangkah sejauh ini tetapi tampaknya tidak berhasil:

<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));

Apa yang saya lakukan salah?

— kstratis
sumber

1

Lihatlah $.ajaxdan serializedi jQuery API.

— Rory McCrossan

1

Apakah itu benar-benar harus berupa objek JSON? Struktur apa yang harus dimiliki objek?

— Anthony Grist

1

@AnthonyGrist Ya, itu harus JSON karena ditujukan ke layanan ReST.

— kstratis

4

Apa yang dimaksud dengan "sepertinya tidak berhasil"? Ingat, kami tidak dapat melihat layar Anda.

— Dour High Arch

2

@ Konos5 - REST tidak ada hubungannya dengan JSON. Tidak perlu data dalam format tertentu.

— danielm

136

Dapatkan data formulir lengkap sebagai array dan json merangkai itu.

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

Anda bisa menggunakannya nanti di ajax. Atau jika Anda tidak menggunakan ajax; taruh di textarea tersembunyi dan berikan ke server. Jika data ini dikirimkan sebagai string json melalui data bentuk normal maka Anda harus mendekodekannya menggunakan json_decode . Anda kemudian akan mendapatkan semua data dalam sebuah array.

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

— SachinGutte
sumber

4

Anda telah menandai pertanyaan dengan jQuery. Jadi, apakah Anda menggunakannya? dengan $.ajaxsangat mudah untuk meneruskan data ini.

— SachinGutte

51

HTML tidak menyediakan cara untuk menghasilkan JSON dari data formulir.

Jika Anda benar-benar ingin menanganinya dari klien, maka Anda harus menggunakan JavaScript untuk:

mengumpulkan data Anda dari formulir melalui DOM
mengaturnya dalam sebuah objek atau larik
buat JSON dengan JSON.stringify
POSTING dengan XMLHttpRequest

Anda mungkin lebih baik tetap menggunakan application/x-www-form-urlencodeddata dan memprosesnya di server daripada JSON. Formulir Anda tidak memiliki hierarki rumit yang akan mendapatkan keuntungan dari struktur data JSON.

Perbarui sebagai tanggapan atas penulisan ulang utama pertanyaan ...

JS Anda tidak memiliki readystatechangepenangan, jadi Anda tidak melakukan apa pun dengan responsnya
Anda memicu JS saat tombol kirim diklik tanpa membatalkan perilaku default. Browser akan mengirimkan formulir (dengan cara biasa) segera setelah fungsi JS selesai.

— Quentin
sumber

1

Oke, jadi bagaimana cara mengatasinya?

— kstratis

1

@Quentin: Dalam kasus saya, saya memerlukan POST lintas domain tanpa kontrol domain.

— pengguna2284570

1

@ user2284570 - Jika Anda memiliki pertanyaan baru, tanyakan .

— Quentin

1

Ada usulan untuk menambahkan enctype='application/json'definisi bentuk untuk membuat data JSON w3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE - Sudahkah Anda membaca halaman itu? Dikatakan, di dalam kotak besar dengan garis bahaya hitam dan kuning di sekitarnya . Waspadalah. Spesifikasi ini tidak lagi dalam pemeliharaan aktif dan Kelompok Kerja HTML tidak bermaksud untuk mempertahankannya lebih lanjut.

— Quentin

3

kode Anda baik-baik saja tetapi tidak pernah dijalankan, karena tombol kirim [type = "submit"] ganti saja dengan type = button

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

di dalam naskah Anda; formulir tidak diumumkan.

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

— tdjprog
sumber

Exactly type = "button" sangat penting, jika tidak digunakan maka redirect dengan parameter url.

— Rohit Parte

1

Saya telat tapi perlu saya sampaikan bagi yang membutuhkan objek, dengan hanya menggunakan html, pasti ada caranya. Di beberapa kerangka kerja sisi server seperti PHP, Anda dapat menulis kode berikut:

<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>

Jadi, kita perlu mengatur nama input object[property]untuk mendapatkan objek. Dalam contoh di atas, kami mendapatkan data dengan JSON berikut:

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

— orafaelreis
sumber

0

Anda dapat mencoba sesuatu seperti:

<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 Yousef
sumber