Optionale Parameterobjekte von ajaxForm() und ajaxSubmit() von jQuery bilden plug-in_jquery

Die Form Plugin API bietet viele nützliche Methoden, mit denen Sie die Daten im Formular und den Formularübermittlungsprozess einfach verwalten können.

Testumgebung: Bereitstellung für ein Webprojekt in Tomcat.

Dieser Artikel demonstriert: die optionalen Parameterobjekte von ajaxForm() und ajaxSubmit() des jQuery-Formular-Plug-ins

Optionales Parameterobjekt von ajaxForm() und ajaxSubmit()

Sowohl ajaxForm als auch ajaxSubmit unterstützen eine große Anzahl optionaler Parameter, die über optionale Parameterelementobjekte übergeben werden. Das optionale Parameterobjekt ist nur ein einfaches JavaScript-Objekt, das einige Eigenschaften und einige Werte enthält:

Ziel

Ersetzen Sie den Inhalt des angegebenen Seitenelements durch den vom Server zurückgegebenen Inhalt. Dieser Wert kann durch einen jQuery-Selektor, ein jQuery-Objekt oder ein DOM-Element dargestellt werden.
Standardwert: null

URL

Die Adresse für die Einreichung des Formulars.
Standardwert: Der Wert der Formularaktion

Typ

Methode der Formularübermittlung, „GET“ oder „POST“.
Standardwert: Der Wert der Methode des Formulars (wenn nicht angegeben, wird davon ausgegangen, dass es sich um „GET“ handelt)

beforeSubmit

Methode, die vor dem Absenden des Formulars ausgeführt wird. Dies kann zur Vorverarbeitung vor der Formularübermittlung oder zur Formularvalidierung verwendet werden. Wenn die durch „beforeSubmit“ angegebene Funktion „false“ zurückgibt, wird das Formular nicht gesendet. Die Funktion „beforeSubmit“ erfordert beim Aufruf drei Parameter: Formulardaten in Form eines Arrays, ein Formularobjekt in Form eines jQuery-Objekts und ein optionales Objekt, das an ajaxForm/ajaxSubmit übergeben wird.

Die Formulardaten in Array-Form haben das folgende Format: [ { Name: 'Benutzername', Wert: 'jresig' }, { Name: 'Passwort', Wert: 'Geheimnis' } ]

Standardwert: null

Erfolg

Funktion, die beim Absenden des Formulars ausgeführt wird. Wenn die Rückruffunktion „success“ angegeben ist, wird diese Methode ausgeführt, wenn der Server eine Antwort auf die Formularübermittlung zurückgibt. Die Werte von „responseText“ und „responsXML“ werden an diesen Parameter übergeben (dies hängt vom Typ des dataType ab).
Standardwert: null

dataType

Geben Sie den Datentyp an, der von der Serverantwort zurückgegeben wird. Eine davon: null, „xml“, „script“ oder „json“. Diese dataType-Option wird verwendet, um anzugeben, wie Sie mit den vom Server zurückgegebenen Daten umgehen. Dies entspricht direkt der jQuery.httpData-Methode.

Hier sind die verfügbaren Optionen:

'xml': Wenn dataType == 'xml', werden die vom Server zurückgegebenen Daten als XML behandelt. In diesem Fall wird die durch 'success' angegebene Rückruffunktion in den ResponseXML-Daten übergeben

'json': Wenn dataType == 'json', werden die vom Server zurückgegebenen Daten ausgeführt und an die Rückruffunktion 'success'

übergeben

'script': Wenn dataType == 'script', werden die vom Server zurückgegebenen Daten im Kontext

ausgeführt

Standardwert: null

semantisch

Ein boolescher Wert, der angibt, ob die Reihenfolge der im Formular übermittelten Daten strikt der semantischen Reihenfolge folgen muss. Im Allgemeinen werden Formulardaten in semantischer Reihenfolge serialisiert, es sei denn, das Formular enthält ein Element „type="image". Sie müssen dies also nur angeben, wenn das Formular eine strikte Reihenfolge erfordern muss und das Formular „type="image" enthält.
Standardwert: false

Formular zurücksetzen

Boolescher Wert, der angibt, ob das Formular nach erfolgreicher Übermittlung zurückgesetzt werden muss.
Standardwert: null

clearForm

Boolescher Wert, der angibt, ob das Formular nach erfolgreicher Übermittlung gelöscht werden muss.
Standardwert: null

iframe

Boolescher Wert, der angibt, ob das Formular an einen Iframe gesendet werden muss. Dies wird verwendet, wenn im Formular ein Dateifeld zum Hochladen von Dateien vorhanden ist. Weitere Informationen finden Sie in der Dokumentation zu Datei-Uploads auf der Seite „Codebeispiele“.
Standardwert: false

1. Einführung abhängiger js

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

Netzwerkdatenträger-Download: https://yunpan.cn/crjzfmXqaTu9eZugriffspasswort e3bc

2. Schreibseite

<!-- 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. Aufrufmethode

<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. Detaillierter Code:

<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>

Erstellen Sie eine neue ajax2.jsp-Datei:

<%@ 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. Testergebnisse:

Geben Sie die Daten ein:

Inhalt des Einreichungsformulars:

Vom Server zurückgegebene Daten:

Der obige Inhalt ist die vollständige Beschreibung der optionalen Parameterobjekte von ajaxForm() und ajaxSubmit() des jQuery-Formular-Plug-ins, die der Editor mit Ihnen geteilt hat. Ich hoffe, dass das Teilen dieses Artikels für alle hilfreich ist.