Rumah >hujung hadapan web >tutorial js >Menggunakan ajax untuk menyerahkan borang borang berdasarkan jQuery melalui kemahiran plug-in_javascript jQuery.form.js

Menggunakan ajax untuk menyerahkan borang borang berdasarkan jQuery melalui kemahiran plug-in_javascript jQuery.form.js

WBOYasal: 2016-05-16 15:44:521710semak imbas

Apabila kami menyerahkan borang, jika kami tidak menggunakan ajax untuk menyerahkan, halaman itu akan menyegarkan sendiri, yang sangat tidak mesra, jadi kami perlu mengubah suai penyerahan borang kami kepada mod ajax untuk memberitahu pengguna dengan jelas bahawa mereka berada dalam At peringkat manakah borang diserahkan: Menghantar? Penyerahan berjaya?

Saya menggunakannya secara ringkas Pemalam Borang jQuery mempunyai kelebihan berikut:

1. Menyokong pengesahan pra penyerahan

2. Sokong panggilan balik selepas penyerahan

3. Gunakan kaedah AJAX dan dapatkan pengalaman pengguna yang baik

4. Kaedah penyerahan adalah fleksibel. Hanya nyatakan ID borang yang akan dihantar jika anda ingin menyerahkannya pada masa yang sama

5. Menyokong penyerahan berbilang jenis data seperti: xml, json, dll.

Fungsi utama:

1.ajaxForm

Tambah semua pendengar acara yang diperlukan untuk menyediakan borang untuk penyerahan AJAX. ajaxForm tidak boleh menyerahkan borang. Dalam fungsi sedia dokumen, gunakan ajaxForm untuk menyediakan penyerahan borang AJAX. ajaxForm menerima 0 atau 1 parameter. Parameter tunggal ini boleh sama ada fungsi panggil balik atau objek Pilihan.

Contoh:

$('#myFormId').ajaxForm();

2.ajaxSubmit

Borang akan diserahkan segera melalui AJAX. Dalam kebanyakan kes, ajaxSubmit dipanggil untuk bertindak balas kepada pengguna yang menyerahkan borang. ajaxSubmit menerima 0 atau 1 parameter. Parameter tunggal ini boleh sama ada fungsi panggil balik atau objek Pilihan.

Contoh:

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航（<span style="color: #333333;"><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" target="_blank"><span style="color: #333333;">防止页面刷新</span></a></span>？）返回false
return false;
});

3.formSerialize

Sirikan (atau sirikan) borang ke dalam rentetan pertanyaan. Kaedah ini akan mengembalikan rentetan dalam format berikut: name1=value1&name2=value2. Kaedah ini mengembalikan rentetan.

Contoh:

var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

4.fieldSerialize

Sirikan (atau sirikan) elemen medan borang ke dalam rentetan pertanyaan. Ini mudah apabila hanya beberapa medan borang yang perlu disiri (atau bersiri). Kaedah ini akan mengembalikan rentetan dalam format berikut: name1=value1&name2=value2. Kaedah ini mengembalikan rentetan.

Contoh:

var queryString = $('#myFormId .specialFields').fieldSerialize();

5.fieldValue

Mengembalikan nilai elemen borang yang sepadan dengan tatasusunan yang disisipkan. Mulai versi 0.91, kaedah ini akan sentiasa mengembalikan data sebagai tatasusunan. Jika nilai elemen dinilai berpotensi tidak sah, tatasusunan adalah kosong, jika tidak ia mengandungi satu atau lebih nilai elemen. Kaedah ini mengembalikan tatasusunan.

Contoh:

// 取得密码输入值
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

6.resetForm

Pulihkan borang kepada keadaan asalnya dengan memanggil kaedah DOM asal elemen borang.

Contoh:

$('#myFormId').resetForm();

7.clearForm

Kosongkan elemen bentuk. Kaedah ini mengosongkan semua medan input teks, medan input kata laluan dan medan kawasan teks, mengosongkan pemilihan dalam mana-mana elemen pilih dan mengosongkan semua butang radio dan butang berbilang pilihan (kotak pilihan) ditetapkan semula kepada keadaan yang tidak dipilih.

Contoh:

$('#myFormId').clearForm();

8.clearFields

Kosongkan elemen medan. Ia mudah digunakan hanya apabila beberapa elemen bentuk perlu dikosongkan.

Contoh:

$('#myFormId .specialFields').clearFields();

Contoh mudah pemalam jQuery Form:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>My Jquery</title>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
  <script type="text/javascript"> 
  // wait for the DOM to be loaded
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function
      $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
      }); 
    }); 
    // attach handler to form's submit event 
    $('#myFormId').submit(function() {   
     // submit the form   
     $(this).ajaxSubmit();   
     // return false to prevent normal browser submit and page navigation   
     return false; 
    });
  </script>
</head>
<body>
  <form id="myForm" action="index.jsp" method="post">
  Name: <input type="text" name="name" />
  Comment:<textarea name="comment"></textarea>
  <input type="submit" value="Submit Comment" />
  </form>
</body>
</html>

Artikel ini memperkenalkan secara terperinci cara jQuery menggunakan ajax untuk menyerahkan borang borang melalui pemalam jQuery.form.js saya harap anda menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ringkasan enam kaedah untuk mengalih keluar pendua daripada kemahiran javascript arrays_javascriptArtikel seterusnya：Ringkasan enam kaedah untuk mengalih keluar pendua daripada kemahiran javascript arrays_javascript

Artikel berkaitan

Lihat lagi