Bagaimana untuk menukar borang borang menjadi rentetan json dalam javascript

Dalam pembangunan web moden, JavaScript telah menjadi bahagian yang sangat diperlukan. Sebagai bahasa skrip sebelah pelanggan, JavaScript boleh berinteraksi dengan HTML dan CSS dengan sangat mudah untuk mencapai interaksi pengguna yang dinamik dan pengalaman pengguna yang kaya.

Antaranya, borang adalah salah satu kaedah interaksi yang paling biasa dan penting dalam aplikasi web. Melalui borang, pengguna boleh memasukkan dan menyerahkan data dengan mudah, dan pembangun boleh mendapatkan dan memproses data ini dengan mudah.

Bagaimana untuk menukar data borang HTML kepada data format JSON dalam JavaScript? Ini adalah keperluan biasa, dan artikel ini menerangkan cara melaksanakannya.

1. Asas borang HTML

Untuk kemudahan demonstrasi dan penjelasan, mari kita lihat kod borang HTML yang mudah:

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>
  
  <label>性别：</label>
  <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  <input type="radio" name="gender" value="female" id="female"><label for="female">女</label><br>
  
  <label>爱好：</label>
  <input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label>
  <input type="checkbox" name="hobby" value="travel" id="travel"><label for="travel">旅游</label>
  <input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label><br>
  
  <label for="comment">评论：</label>
  <textarea id="comment" name="comment"></textarea><br>
  
  <input type="submit" value="提交">
</form>

Ini ialah kotak input , butang radio, kotak semak, medan teks dan butang hantar untuk borang. Kita boleh memasukkan teks dalam kotak input, pilih pilihan dalam kotak radio dan kotak semak, dan akhirnya klik butang hantar untuk menyerahkan data borang ke pelayan.

Perhatikan bahawa setiap elemen bentuk mempunyai atribut nama dan atribut nilai. Atribut nama digunakan untuk mengenal pasti nama elemen ini dan atribut nilai digunakan untuk menyimpan nilai yang dimasukkan oleh pengguna.

2. Mendapatkan data borang

Dalam JavaScript, anda boleh mendapatkan data yang dimasukkan oleh pengguna dengan mengakses atribut nilai elemen borang. Sebagai contoh, untuk mendapatkan nilai nama pengguna dan kata laluan, anda boleh melakukan perkara berikut:

var username = document.getElementById("username").value; // 获取用户名
var password = document.getElementById("password").value; // 获取密码

Begitu juga, anda juga boleh mendapatkan nilai elemen bentuk lain.

3. Tukar data borang ke dalam format JSON

Dalam pembangunan sebenar, kita biasanya perlu menukar data borang kepada data format JSON untuk penyimpanan atau penghantaran. Di bawah ini kami akan memperkenalkan cara melaksanakan fungsi ini.

Pertama, kita perlu mengikat fungsi hantar ke borang. Dalam fungsi ini, kita boleh mengikuti langkah berikut untuk mendapatkan data borang dan menukarnya ke dalam format JSON:

document.getElementById("form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  
  var form = document.getElementById("form");
  var data = new FormData(form);
  
  var json = {};
  data.forEach(function(value, key) {
    if (json[key] !== undefined) {
      if (!Array.isArray(json[key])) {
        json[key] = [json[key]];
      }
      json[key].push(value);
    } else {
      json[key] = value;
    }
  });
  
  console.log(json); // 输出JSON格式的数据
});

Di sini kita menggunakan objek FormData untuk mendapatkan data borang. Objek ini menyediakan beberapa kaedah biasa untuk memproses data borang, seperti mendapatkan nilai semua elemen bentuk, mendapatkan nilai elemen bentuk tertentu, dsb.

Kemudian, kita perlu menukar objek FormData kepada data format JSON. Pelaksanaan khusus adalah seperti berikut:

1. Lintas elemen dalam objek FormData satu demi satu untuk mendapatkan nilai nama dan atribut nilainya.
2. Jika atribut nama semasa telah muncul, ia dianggap sebagai tatasusunan. Ini kerana beberapa elemen dalam borang mungkin mempunyai nama yang sama, contohnya berbilang kotak semak mungkin semuanya mempunyai atribut nama "hobi".
3. Tambahkan nilai semasa (nilai) pada tatasusunan yang sepadan untuk menyimpan nilai berbilang kotak semak.
4. Jika tidak, tambah terus nilai semasa (nilai) pada objek JSON (json) sebagai nilai atribut.

Perhatikan bahawa jika terdapat berbilang elemen dengan nama yang sama dalam borang, seperti berbilang kotak semak, kita perlu menyimpan nilainya dalam tatasusunan. Oleh itu, apabila melintasi objek FormData, kita perlu menentukan sama ada nilai (nilai) mereka sudah menjadi tatasusunan. Jika tidak, anda perlu menukarnya kepada tatasusunan.

Akhir sekali, kami boleh mengeluarkan data format JSON yang ditukar melalui console.log. Data ini boleh digunakan untuk bersiri, penyimpanan atau penghantaran.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menukar data borang kepada data format JSON dalam JavaScript. Dengan menggunakan kaedah seperti objek FormData dan merentasi elemen borang, kami boleh melaksanakan fungsi ini dengan mudah, dengan itu mencapai pemprosesan data yang lebih fleksibel dan cekap. Sama ada dalam pembangunan bahagian hadapan, pembangunan bahagian belakang atau pembangunan aplikasi mudah alih, teknologi ini merupakan bahagian yang penting dan patut dikuasai dan digunakan oleh pembangun.

Atas ialah kandungan terperinci Bagaimana untuk menukar borang borang menjadi rentetan json dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!