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?

javascript jquery html json forms 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

Jawaban:

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:

  1. mengumpulkan data Anda dari formulir melalui DOM
  2. mengaturnya dalam sebuah objek atau larik
  3. buat JSON dengan JSON.stringify
  4. 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