jQuery EasyUI Form Plugin - Form Form

Verwendung

Erstellen Sie eine einfache HTML-Formular. Erstellen Sie ein Formular, und geben id, Aktion, Methodenzuordnungen.

<Form id = "ff" method = "post">
    <Div>
		<Label for = "name"> Name: </ label>
		<Input class = "easyui-validatebox" type = "text" name = "name" Daten-Optionen = "erforderlich: true" />
    </ Div>
    <Div>
		<Label for = "E-Mail"> E-Mail: </ label>
		<Input class = "easyui-validatebox" type = "text" name = "email" Daten-Optionen = "validType: 'E-Mail'" />
    </ Div>
    ...
</ Form>

Lassen Sie das Formular (Formular) werden Ajax-Formular-Vorlage (Formular)

$ ( '# Ff'). Formular ({
    url: ...,
    onSubmit: function () {
		// Sie einige der Scheck
		// Return false vorlegen zu verhindern;
    },
    Erfolg: function (data) {
		alert (Daten)
    }
});
// Sie das Formular aus
. $ ( '# Ff') einreichen ();

Führen Sie eine Vorlage Aktion

// 'Submit' Methode der Form-Plugin aufrufen, das Formular abzusenden
$ ( '# Ff'). Formular ( "Senden", {
    url: ...,
    onSubmit: function () {
		// Sie einige der Scheck
		// Return false vorlegen zu verhindern;
    },
    Erfolg: function (data) {
		alert (Daten)
    }
});

Durch die Übermittlung zusätzlicher Parameter

$ ( '# Ff'). Formular ( "Senden", {
    url: ...,
    onSubmit: function (param) {
		param.p1 = 'Wert1';
		param.p2 = 'value2';
    }
});

Senden Antwortbearbeitung

Einen Ajax-Formular (Formular) ist sehr einfach. Wenn ein Benutzer abgeschlossen einreicht, kann die Antwortdaten erhalten. Beachten Sie, dass die Antwortdaten die Rohdaten von dem Server befindet. Die analytischen Daten für Antwortaktion, die richtigen Daten anfordert.

Beispielsweise sei angenommen, dass die Antwort JSON Datenformat ist, sind eine typische Antwortdaten, wie folgt:

{
    "Erfolg": true,
    "Message": "Nachricht erfolgreich gesendet."
}

Jetzt übernimmt JSON-String "Erfolg" Callback-Funktion.

$ ( '# Ff'). Formular ( "Senden", {
    Erfolg: function (data) {
		var data = eval ( '(' + Daten + ')'); // Die JSON-String ändern, um JavaScript-Objekt
		if (data.success) {
			alert (data.message)
		}
    }
});

Immobilien

Ereignis

Weg

$.messager.progress();	// display the progress bar
$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){
		var isValid = $(this).form('validate');
		if (!isValid){
			$.messager.progress('close');	// hide progress bar while the form is invalid
		}
		return isValid;	// return false will stop the form submission
	},
	success: function(){
		$.messager.progress('close');	// hide progress bar while submit successfully
	}
});

$('#ff').form('load','get_data.php');	// load from URL

$('#ff').form('load',{
	name:'name2',
	email:'[email protected]',
	subject:'subject2',
	message:'message2',
	language:5
});