Bagaimana untuk Menghantar Data Borang sebagai Objek JSON Menggunakan AJAX?

Cara Menghantar Data Borang sebagai Objek JSON Menggunakan AJAX

Apabila pengguna menyerahkan borang HTML, anda mungkin mahu menghantar datanya ke pelayan sebagai objek JSON untuk pemprosesan yang mudah. Begini cara untuk mencapainya menggunakan AJAX:

1. Buat Pengendali Borang dan Hantar:

   Tentukan borang HTML dengan medan input teks untuk mengumpul pengguna data. Tambahkan pengendali acara onclick pada butang hantar yang mengendalikan penyerahan borang.

<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 type="submit" value="Submit" onclick="submitform()">
</form></code>

2. Tangkap Data Borang dalam JavaScript:

   Di dalam fungsi submitform(), dapatkan semula data borang lengkap sebagai tatasusunan menggunakan kaedah serializeArray() jQuery:

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

3. AJAX Permintaan dengan Jenis Kandungan JSON:

   Buat objek XMLHttpRequest, nyatakan kaedah POST dan URL titik akhir, dan tetapkan pengepala Jenis Kandungan kepada "aplikasi/json":

<code class="javascript">var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');</code>

4. Hantar Data berkod JSON:

   Hantar data borang berkod JSON ke pelayan menggunakan xhr.send():

<code class="javascript">xhr.send(formData);</code>

5. Kendalikan Respons Pelayan:

   Laksanakan pendengar acara onload untuk mengendalikan respons pelayan dan melakukan tindakan yang diperlukan, seperti memaparkan mesej kejayaan atau mengubah hala ke halaman lain.

Dengan mengikuti langkah ini, anda boleh menghantar objek JSON yang mengandungi data borang ke pelayan anda untuk pemprosesan yang cekap dan serba boleh.

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