Bagaimana untuk Menghantar Data Borang HTML sebagai JSON Menggunakan Ajax?

Penghantaran Data JSON Menggunakan Data Borang HTML

Dalam bidang pembangunan web, selalunya timbul keperluan untuk menghantar data daripada borang HTML ke pelayan. Walaupun kaedah tradisional wujud, artikel ini meneroka pendekatan alternatif: menghantar data borang sebagai objek JSON.

Cabaran

Andaikan anda mempunyai borang HTML dengan yang berikut struktur:

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

Objektifnya adalah untuk menghantar data yang dimasukkan ke dalam borang ini sebagai objek JSON apabila pengguna mengklik butang "Serah".

Ralat Permulaan

Sesetengahnya mungkin cuba menggunakan kod ini:

<code class="javascript">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

Walau bagaimanapun, pendekatan ini gagal kerana ia tidak mendapatkan semula data sebenar daripada input borang.

解决方案

Kunci untuk menyelesaikan isu ini terletak pada mendapatkan data borang yang lengkap. Ini boleh dicapai menggunakan kod berikut:

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

Kaedah serializeArray() menukar data borang kepada tatasusunan pasangan nilai kunci. Dengan menukar tatasusunan ini kepada rentetan JSON, kami boleh mendapatkan objek JSON yang diingini.

Integrasi dengan Ajax

Untuk menghantar data JSON menggunakan Ajax, anda boleh menggunakan kod berikut:

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

Kini, apabila pengguna menyerahkan borang, objek JSON yang mengandungi data borang akan dihantar ke URL pelayan yang ditentukan melalui Ajax.

Pendekatan ini memberikan kemudahan dan cara yang cekap untuk menghantar data borang HTML sebagai objek JSON, meningkatkan kepelbagaian dan kefungsian aplikasi web anda.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data Borang HTML sebagai JSON Menggunakan Ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!