Apakah kaedah penyerahan borang js yang berbeza?

Apakah cara untuk menghantar borang JS?

Dalam pembangunan bahagian hadapan, borang adalah salah satu bentuk interaksi data yang penting antara pengguna dan halaman web. JavaScript, sebagai bahasa skrip yang berkuasa, membolehkan kami menyerahkan data borang dalam pelbagai cara. Berikut akan memperkenalkan beberapa kaedah penyerahan borang JS biasa dan memberikan contoh kod khusus.

1. Serahkan borang menggunakan kaedah submit() elemen borang:

   Ini adalah cara paling asas, terus memanggil kaedah submit() elemen borang untuk menyerahkan borang. Contoh kod adalah seperti berikut:

   <form id="myForm" action="submit.php" method="post">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script>
     function submitForm() {
       document.getElementById("myForm").submit();
     }
   </script>

   Salin selepas log masuk

   Dalam kod di atas, apabila butang hantar diklik, fungsi submitForm() dipanggil untuk menghantar data borang ke halaman submit.php.

2. Gunakan objek XMLHttpRequest untuk menyerahkan borang:

   Objek XMLHttpRequest ialah teknologi yang digunakan untuk interaksi data dengan pelayan di latar belakang. Hantar data borang ke pelayan dengan mencipta objek XMLHttpRequest. Contoh kod adalah seperti berikut:

   <form id="myForm">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script>
     function submitForm() {
       var xhr = new XMLHttpRequest();
       var formData = new FormData(document.getElementById("myForm"));
   
       xhr.open("POST", "submit.php", true);
       xhr.onreadystatechange = function() {
         if (xhr.readyState === 4 && xhr.status === 200) {
           console.log(xhr.responseText);
         }
       };
       xhr.send(formData);
     }
   </script>

   Salin selepas log masuk

   Apabila menghantar data borang melalui XMLHttpRequest, anda perlu memberi perhatian untuk membina objek FormData dan menggunakannya sebagai parameter kaedah send() untuk menghantar data.

3. Serahkan borang menggunakan perpustakaan AJAX:

   Pustaka AJAX, seperti jQuery, menyediakan cara yang lebih mudah untuk melaksanakan penyerahan borang. Contoh kod adalah seperti berikut:

   <form id="myForm">
     <input type="text" name="username" />
     <input type="password" name="password" />
     <button type="button" onclick="submitForm()">提交</button>
   </form>
   
   <script src="jquery.min.js"></script>
   <script>
     function submitForm() {
       var formData = $("#myForm").serialize();
   
       $.post("submit.php", formData, function(response) {
         console.log(response);
       });
     }
   </script>

   Salin selepas log masuk

   Dalam kod di atas, dengan mensiri data borang, menggunakan kaedah $.post() untuk menghantar data ke pelayan dan memproses hasil respons dalam fungsi panggil balik.

Di atas adalah beberapa kaedah penyerahan borang JS yang biasa dan contoh kodnya. Mengikut keperluan khusus dan tindanan teknologi, pilih kaedah yang sesuai untuk melaksanakan penyerahan borang. Saya harap kandungan artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Apakah kaedah penyerahan borang js yang berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!