Bagaimana untuk Membuat Objek JSON daripada Data Borang HTML?

Membuat Objek JSON daripada Data Borang HTML

Dalam bidang pembangunan web, menghantar data dengan lancar ke pelayan adalah penting. Apabila berurusan dengan borang HTML, seseorang mungkin menghadapi keperluan untuk menyampaikan data dalam format JSON. Artikel ini membincangkan pendekatan optimum untuk mencapai matlamat ini tanpa menghadapi halangan.

Pertimbangkan bentuk HTML berikut sebagai contoh:

<code class="html"><form action="myurl" method="POST" name="myForm">
  <label for="first_name">First Name:</label>
  <input type="text" name="first_name" id="fname">
  <label for="last_name">Last Name:</label>
  <input type="text" name="last_name" id="lname">
  <input value="Submit" type="submit" onclick="submitform()">
</form></code>

Objektif kami adalah untuk mengubah data daripada borang ini menjadi objek JSON dan hantarkannya ke pelayan selepas penyerahan borang.

Pada mulanya, anda mungkin telah mencuba penyelesaian menggunakan kod berikut:

<code class="javascript">function submitform(){
  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));
}</code>

Walau bagaimanapun, pendekatan ini gagal disebabkan oleh faktor penting kecacatan. Daripada mendapatkan semula data daripada borang, anda telah membuat sampel objek JSON secara manual. Untuk membetulkannya, kita perlu mengumpulkan data borang secara dinamik.

Penyelesaian terletak pada memanfaatkan kuasa jQuery untuk mengekstrak data borang sebagai tatasusunan, yang kemudiannya boleh kita tukar menjadi rentetan JSON:

<code class="javascript">var formData = JSON.stringify($("myForm").serializeArray());</code>

Barisan kod ini menangkap semua data daripada borang dengan berkesan dan menukarkannya kepada format JSON yang diingini. Anda kemudiannya boleh menggunakan rentetan JSON ini dalam permintaan AJAX anda atau, jika AJAX bukan pilihan, masukkannya ke dalam kawasan teks tersembunyi dan serahkan borang secara tradisional.

Selain itu, jika anda menghantar data sebagai rentetan JSON melalui borang HTML standard, ambil perhatian bahawa ia perlu dinyahkod pada bahagian pelayan untuk mengakses titik data individu dalam format tatasusunan.

Dengan mengikuti pendekatan ini, anda boleh menghantar objek JSON daripada borang HTML anda dengan mudah. , memastikan penghantaran data yang lancar dan komunikasi pelayan yang cekap.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Objek JSON daripada Data Borang HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!