Tukar borang javascript kepada objek

Tukar borang JavaScript kepada objek

Dalam pembangunan web, borang ialah komponen yang sangat biasa. Apabila kita perlu mendapatkan data input daripada borang, kita biasanya memproses data dalam bentuk objek. Menukar borang kepada objek JavaScript memudahkan untuk memanipulasi data. Dalam artikel ini, kami akan membincangkan cara menukar borang kepada objek menggunakan JavaScript.

Dalam HTML, borang biasanya dibuat menggunakan elemen borang. Kami menggunakan JavaScript untuk mendapatkan elemen borang, kemudian lelaran melalui semua kawalan borang, dapatkan nilainya dan simpannya dalam objek. Berikut ialah contoh:

Borang HTML

Pertama, kita perlu mencipta borang dalam HTML terlebih dahulu, seperti yang ditunjukkan di bawah:

<form>
  <input type="text" name="firstName" value="John">
  <input type="text" name="lastName" value="Doe">
  <input type="email" name="email" value="john.doe@example.com">
  <input type="submit" value="Submit">
</form>

Borang di atas mengandungi 3 kawalan input dan butang hantar. Setiap kawalan mempunyai nama dan nilai.

Kod JavaScript

Seterusnya, kami akan menulis kod JavaScript untuk menukar borang menjadi objek. Kami akan menggunakan objek FormData untuk mendapatkan nilai kawalan borang. Objek FormData ialah API baharu yang membolehkan kami mendapatkan data borang dengan cara yang mudah dan ia boleh mengendalikan borang yang mengandungi fail.

Dalam contoh ini kami tidak memasukkan muat naik fail supaya kami boleh menggunakan gelung mudah untuk mendapatkan semua nilai dalam borang. Kita boleh mendapatkan nama setiap kawalan melalui atribut nama, dan mendapatkan nilai setiap kawalan melalui atribut nilai. Kami juga perlu menyemak jenis setiap kawalan untuk memastikan kami mengendalikan setiap nilai dengan betul.

Berikut ialah kod JavaScript kami:

// 获取表单元素
var form = document.querySelector('form');

// 创建一个空对象来存储表单数据
var formData = {};

// 循环所有控件
for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;

  // 确保控件被支持，并且不包含文件
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      // 将数字转换成数值类型
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

// 输出表单数据对象
console.log(formData);

Dalam kod di atas, kami mula-mula mendapatkan elemen borang dan kemudian mencipta objek kosong formData untuk menyimpan data borang. Kami menggunakan gelung untuk menggelungkan semua kawalan borang, mendapatkan nama dan nilainya dan menyimpannya dalam objek formData.

Perhatikan bahawa kami juga menyemak jenis setiap kawalan. Jika kawalan adalah jenis angka, kami menukarnya kepada jenis angka dan menyimpannya dalam objek.

Akhir sekali, kami mengeluarkan objek data borang ke konsol.

Kod ujian

Berikut ialah kod ujian kami untuk mengesahkan sama ada objek borang adalah betul:

// 测试代码
var form = document.querySelector('form');
form.elements['firstName'].value = 'Jane';
form.elements['lastName'].value = 'Doe';
form.elements['email'].value = 'jane.doe@example.com';

var formData = {};

for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

console.log(formData);

Jalankan kod ujian di atas, output adalah seperti berikut:

{
  firstName: "Jane",
  lastName: "Doe",
  email: "jane.doe@example.com"
}

Kini setelah kami menukar borang menjadi objek JavaScript, kami boleh memanipulasi data dengan mudah, seperti menghantarnya dalam permintaan AJAX.

Atas ialah kandungan terperinci Tukar borang javascript kepada objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!