Objek parameter pilihan ajaxForm() dan ajaxSubmit() dari jQuery form plug-in_jquery

API Form Plugin menyediakan banyak kaedah berguna yang membolehkan anda mengendalikan data dalam borang dan proses penyerahan borang dengan mudah.

Persekitaran ujian: digunakan untuk projek web dalam Tomcat.

Artikel ini menunjukkan: objek parameter pilihan ajaxForm() dan ajaxSubmit() bagi pemalam borang jQuery

Objek parameter pilihan ajaxForm() dan ajaxSubmit()

Kedua-dua ajaxForm dan ajaxSubmit menyokong sejumlah besar parameter pilihan, yang dihantar melalui objek item parameter pilihan. Objek parameter pilihan hanyalah objek JavaScript ringkas yang mengandungi beberapa sifat dan beberapa nilai:

sasaran

Ganti kandungan elemen halaman yang ditentukan dengan kandungan yang dikembalikan oleh pelayan. Nilai ini boleh diwakili oleh pemilih jQuery, objek jQuery atau elemen DOM.
Nilai lalai: null

url

Alamat untuk penyerahan borang.
Nilai lalai: Nilai tindakan borang

taip

Kaedah penyerahan borang, 'DAPAT' atau 'POS'.
Nilai lalai: Nilai kaedah borang (jika tidak dinyatakan, ia diandaikan sebagai 'GET')

sebelumSerah

Kaedah dilaksanakan sebelum penyerahan borang. Ini boleh digunakan untuk pra-pemprosesan sebelum penyerahan borang, atau pengesahan borang. Jika fungsi yang ditentukan oleh 'beforeSubmit' mengembalikan palsu, borang tidak akan diserahkan. Fungsi 'beforeSubmit' memerlukan 3 parameter apabila dipanggil: data bentuk dalam bentuk tatasusunan, objek bentuk dalam bentuk objek jQuery dan objek pilihan untuk dihantar ke ajaxForm/ajaxSubmit.

Data borang dalam bentuk tatasusunan adalah dalam format berikut: [ { nama: 'nama pengguna', nilai: 'jresig' }, { nama: 'kata laluan', nilai: 'rahsia' } ]

Nilai lalai: batal

kejayaan

Fungsi dilaksanakan apabila borang diserahkan. Jika fungsi panggil balik 'berjaya' ditentukan, kaedah ini akan dilaksanakan apabila pelayan mengembalikan respons kepada penyerahan borang. Nilai responseText dan responseXML akan dihantar ke dalam parameter ini (ini bergantung pada jenis dataType).
Nilai lalai: null

jenis data

Nyatakan jenis data yang dikembalikan oleh respons pelayan. Salah satu daripadanya: null, 'xml', 'script' atau 'json' Pilihan dataType ini digunakan untuk menunjukkan cara anda mengendalikan data yang dikembalikan oleh pelayan. Ini sepadan terus dengan kaedah jQuery.httpData.

Berikut ialah pilihan yang tersedia:

'xml': Jika dataType == 'xml', data yang dikembalikan oleh pelayan dianggap sebagai XML Dalam kes ini, fungsi panggil balik yang ditentukan oleh 'kejayaan' akan dihantar dalam data responseXML

.

'json': Jika dataType == 'json', data yang dikembalikan oleh pelayan akan dilaksanakan dan dihantar ke fungsi panggil balik 'kejayaan'

'skrip': Jika dataType == 'skrip', data yang dikembalikan oleh pelayan akan dilaksanakan dalam konteks

Nilai lalai: batal

semantik

Nilai Boolean yang digunakan untuk menunjukkan sama ada susunan data yang diserahkan dalam borang perlu mengikut susunan semantik dengan ketat. Secara amnya, data borang disiri dalam susunan semantik, melainkan terdapat elemen jenis="imej" dalam borang Jadi anda hanya perlu menentukan ini apabila borang mesti memerlukan susunan yang ketat dan terdapat jenis="imej" dalam borang.
Nilai lalai: palsu

Borang Semula

Nilai Boolean yang menunjukkan sama ada borang perlu ditetapkan semula selepas penyerahan berjaya.
Nilai lalai: null

clearForm

Nilai Boolean yang menunjukkan sama ada borang perlu dikosongkan selepas penyerahan berjaya.
Nilai lalai: null

iframe

Nilai Boolean digunakan untuk menunjukkan sama ada borang perlu diserahkan kepada iframe. Ini digunakan apabila terdapat medan fail dalam borang untuk memuat naik fail. Untuk maklumat lanjut, lihat dokumentasi Muat Naik Fail pada halaman Contoh Kod.
Nilai lalai: palsu

1. Memperkenalkan dependent js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

Muat turun cakera rangkaian: https://yunpan.cn/crjzfmXqaTu9e Akses kata laluan e3bc

2. Halaman penulisan

<!-- demo1 -->
<form id="myForm" action="ajax2.jsp" method="post"> 
名称： <input type="text" name="name" /> <br/>
地址： <input type="text" name="address" /><br/> 
自我介绍： <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>

3. Kaedah panggilan

<script type="text/javascript"> 
$(document).ready(function() { 
var options = { 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交后 
//另外的一些属性: 
//url: url // 默认是form的action，如果写的话，会覆盖from的action. 
//type: type // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
//clearForm: true // 成功提交后，清除所有的表单元素的值.
resetForm: true // 成功提交后，重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后，跳出请求. 
//timeout: 3000 
}; 
//'ajaxForm' 方式的表单 .
$('#myForm').ajaxForm(options); 
//或者 'ajaxSubmit' 方式的提交.
//$('#myForm').submit(function() { 
// $(this).ajaxSubmit(options); 
// return false; //来阻止浏览器提交.
//}); 
}); 
// 提交前
function showRequest(formData, jqForm, options) { 
// formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串.
var queryString = $.param(formData); //组装数据，插件会自动提交数据
alert(queryString); //类似 ： name=1&add=2 
return true; 
} 
// 提交后
function showResponse(responseText, statusText) { 
alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); 
} 
</script> 

4. Kod terperinci:

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
var options = { 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交后 
//另外的一些属性: 
//url: url // 默认是form的action，如果写的话，会覆盖from的action. 
//type: type // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
//clearForm: true // 成功提交后，清除所有的表单元素的值.
resetForm: true // 成功提交后，重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后，跳出请求. 
//timeout: 3000 
}; 
//'ajaxForm' 方式的表单 .
$('#myForm').ajaxForm(options); 
//或者 'ajaxSubmit' 方式的提交.
//$('#myForm').submit(function() { 
// $(this).ajaxSubmit(options); 
// return false; //来阻止浏览器提交.
//}); 
}); 
// 提交前
function showRequest(formData, jqForm, options) { 
// formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串.
var queryString = $.param(formData); //组装数据，插件会自动提交数据
alert(queryString); //类似 ： name=1&add=2 
return true; 
} 
// 提交后
function showResponse(responseText, statusText) { 
alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); 
} 
</script> 


 Demo 4 : jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象. 
<!-- demo1 -->
<form id="myForm" action="ajax2.jsp" method="post"> 
名称： <input type="text" name="name" /> <br/>
地址： <input type="text" name="address" /><br/> 
自我介绍： <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>

Buat fail ajax2.jsp baharu:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " - " +address + " - " +comment);
out.println(name + " " +address + " " +comment);
%>

5. Keputusan ujian:

Isi data:

Kandungan borang penyerahan:

Data yang dikembalikan daripada pelayan:

Kandungan di atas ialah keseluruhan perihalan objek parameter pilihan ajaxForm() dan ajaxSubmit() bagi pemalam borang jQuery yang telah dikongsi oleh editor dengan anda. Saya harap perkongsian artikel ini dapat membantu semua orang.