penyerahan borang ajax jquery tidak menyegarkan halaman

Dalam pembangunan web, penyerahan borang adalah operasi yang sangat biasa, dan biasanya, penyerahan borang diselesaikan dengan menyegarkan halaman. Walau bagaimanapun, bagaimana jika anda tidak mahu memuat semula halaman selepas menyerahkan borang? Artikel ini akan memperkenalkan cara menggunakan jQuery dan Ajax untuk melaksanakan penyerahan borang tanpa menyegarkan halaman.

1. Mengapa tidak muat semula halaman

Dalam proses penyerahan borang tradisional, pengguna mesti menunggu dengan sabar sehingga halaman dimuat semula, yang menjadikan pengalaman pengguna sangat menyusahkan. Jika halaman dimuat semula, pengguna mungkin perlu memasukkan semula kandungan borang yang telah diisi sebelum ini, yang akan menyebabkan pengguna tidak berpuas hati. Di samping itu, muat semula halaman juga boleh menyebabkan kehilangan beberapa data, yang juga akan menyebabkan masalah yang tidak perlu kepada pengguna.

Oleh itu, melaksanakan penyerahan borang tanpa menyegarkan halaman melalui Ajax boleh meningkatkan pengalaman pengguna dengan berkesan dan menjimatkan masa dan tenaga pengguna.

2. Langkah pelaksanaan

Di bawah, kami akan menggunakan langkah berikut untuk melaksanakan penyerahan borang tanpa memuat semula halaman.

1. Dengar acara penyerahan borang

Pertama, kita perlu mengikat fungsi pendengar untuk acara serahan pada borang, supaya borang boleh diserahkan melalui JavaScript . Pada masa yang sama, kita perlu menghalang kelakuan penyerahan borang lalai penyemak imbas dengan mengembalikan palsu. Kodnya adalah seperti berikut:

$('form').submit(function() { 
  // ajax 表单提交代码... 
  return false; 
}); 

2. Dapatkan data borang

Seterusnya, kita perlu mendapatkan data borang melalui kaedah serialize() jQuery. Kaedah ini mensiri semua data dalam bentuk menjadi rentetan untuk digunakan dalam permintaan Ajax berikutnya. Kodnya adalah seperti berikut:

var formData = $('form').serialize(); 

3. Hantar permintaan Ajax

Sekarang, kita perlu menghantar permintaan tak segerak melalui kaedah ajax() jQuery untuk menyerahkan borang tanpa memuat semula muka surat. Kodnya adalah seperti berikut:

$.ajax({ 
  type: 'POST', 
  url: 'submit.php', 
  data: formData, 
  success: function(result) { 
    // 处理返回的数据 
  } 
}); 

Dalam kaedah ajax() ini, kami mentakrifkan parameter berikut:

• type: Jenis permintaan. Dalam contoh ini, kami memilih kaedah POST.
• url: URL sasaran permintaan. Berikut ialah submit.php, yang mewakili fail PHP yang akan menghantar data selepas borang diserahkan.
• data: Data dihantar ke pelayan. Kami menggunakan data borang yang diperoleh sebelum ini, formData.
• success: fungsi panggil balik selepas permintaan berjaya. Dalam fungsi ini, kami boleh memproses data yang dikembalikan oleh pelayan dengan sewajarnya.

4. Proses data yang dikembalikan oleh pelayan

Apabila pelayan mengembalikan data, kami boleh memprosesnya dalam fungsi panggil balik kejayaan. Sebagai contoh, kami boleh memaparkan data yang dikembalikan oleh pelayan pada halaman, atau menukar status halaman melalui JavaScript. Kodnya adalah seperti berikut:

success: function(result) { 
  // 处理返回的数据： 
  alert(result); 
  $('form')[0].reset(); 
} 

Dalam fungsi panggil balik ini, kami melakukan dua operasi pada data yang dikembalikan oleh pelayan:

• Paparkan kotak gesaan melalui kaedah amaran JavaScript() , Kandungan adalah data yang dikembalikan oleh pelayan.
• Tetapkan semula borang melalui kaedah reset() jQuery untuk membolehkan pengguna mengisi data baharu.

Pada ketika ini, melalui empat langkah di atas, kami telah berjaya melaksanakan penyerahan borang tanpa memuat semula halaman.

3. Nota

Walaupun penyerahan borang melalui Ajax boleh meningkatkan pengalaman pengguna, terdapat juga beberapa perkara yang perlu diberi perhatian semasa penggunaan:

1. Cegah penyerahan borang berulang

Memandangkan permintaan Ajax adalah tidak segerak, apabila pengguna kerap mengklik butang hantar, borang itu boleh diserahkan berulang kali. Untuk mengelakkan masalah ini, kami boleh melumpuhkan butang hantar borang semasa menghantar permintaan Ajax dan membolehkannya selepas permintaan selesai. Kodnya adalah seperti berikut:

$('form').submit(function() { 
  // 禁用按钮 
  $('input[type="submit"]', this).attr('disabled', 'disabled'); 

  // ajax 表单提交代码... 

  // 启用按钮 
  $('input[type="submit"]', this).removeAttr('disabled'); 
}); 

2. Mengendalikan ralat yang dikembalikan oleh pelayan

Dalam permintaan Ajax, jika pelayan mengembalikan kod status yang salah, kami perlu mengendalikan ralat ini tepat pada masanya. Biasanya, kita boleh menilai status yang dikembalikan oleh pelayan melalui data dalam fungsi panggil balik kejayaan, dan melakukan pemprosesan seterusnya mengikut situasi tertentu. Sebagai contoh, apabila kod status yang dikembalikan oleh pelayan ialah 401, ini mungkin bermakna pengguna tidak log masuk. Dalam kes ini, kita perlu log masuk pengguna melalui lompat halaman untuk terus mengakses.

success: function(result) { 
  if (result.status === 'success') { 
    alert('提交成功'); 
    $('form')[0].reset(); 
  } else if (result.status === 'failed') { 
    alert('提交失败'); 
  } else if (result.status === 'error') { 
    alert('发生了错误：' + result.message); 
  } 
} 

4. Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery dan Ajax untuk melaksanakan penyerahan borang tanpa memuat semula halaman. Dengan mendengar acara penyerahan borang, mendapatkan data borang, menghantar permintaan Ajax dan memproses data yang dikembalikan oleh pelayan, kami boleh melaksanakan penyerahan borang tanpa menyegarkan halaman dan meningkatkan pengalaman pengguna. Sudah tentu, anda juga perlu memberi perhatian kepada beberapa masalah yang berpotensi apabila menggunakannya, seperti menghalang penyerahan borang berulang dan ralat pengendalian yang dikembalikan oleh pelayan. Saya harap artikel ini akan membantu anda melaksanakan penyerahan borang tanpa memuat semula halaman.

Atas ialah kandungan terperinci penyerahan borang ajax jquery tidak menyegarkan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!