Jquery.Form Un exemple simple de formulaire asynchrone submit_jquery

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. Écrivez un formulaire dans votre page. Un formulaire normal, aucun balisage particulier n'est requis :

Copier le code Le code est le suivant : Nom : Mot de passe :

sans composant Jquery.Form Lors de la soumission du formulaire, la page entrera en mode blocage, en attendant une réponse du serveur. 2. Introduisez les fichiers de script Javascript jQuery et Form Plugin et ajoutez quelques codes simples pour permettre à la page d'initialiser le formulaire après le chargement du DOM :

" src="path/to/form.js"> // attendre que le DOM soit chargé $ (document).ready(function() { $('#myForm').ajaxForm(function() { alert("Merci pour votre commentaire!" ); }); 🎜>&Lt;/ head> Après l'ajout du composant jquery.form, lors de la soumission du formulaire, la page ne sera plus soumise de manière synchrone, mais sera soumise de manière asynchrone par js, donc la page ne sera pas actualisée après la soumission.

3. Ajoutez une fonction de rappel qui peut interagir avec le serveur.

Copier le code

Le code est le suivant :

$(document).ready(function () { //options是一个ajaxForm的配置对象。? var options = { //cible : '#output1', // élément(s) cible(s) à mettre à jour avec la réponse du serveur //beforeSubmit : showRequest, // rappel avant la soumission succès : callBackFunc // rappel après la soumission

// autres options disponibles : //url : url // remplacer l'attribut 'action' du formulaire //type : type // 'get' ou 'post', remplacer pour l'attribut 'method' du formulaire //dataType : null // 'xml', 'script' ou 'json' (type de réponse attendu du serveur) //clearForm: true // efface tous les champs du formulaire après avoir réussi submit //resetForm : true // réinitialiser le formulaire après une soumission réussie

// Les options $.ajax peuvent également être utilisées ici, par exemple : //timeout : 3000 } ;

// lier le formulaire à l'aide de 'ajaxForm' $('#myForm').ajaxForm(options); }); //responseText是服务端的响应值。statusText是页面

// 提交状态值，success表示成功。 function callBackFunc(responseText, statusText) { if (statusText == 'success') { alert(responseText); }

autrefois{

alert("服务端错误！");

} }

如果返回的是json数据则回调函数可以这么写 function resultFunction(responseText,statusText) { if (statusText == 'success') { si (responseText.code == 1 ) { alert(responseText.message); } else { alert('une erreur se produit !'); } } else { alert('服务器错误！'); } }

服务端的代码如下： 复制代码 代码如下: [HttpPost] public ActionResult AjaxForm(FormCollection form) { string message = "Name:" form["username"] " PWD: " form[" mot de passe"] ; //return Content(message); return Json(new { code = 1, message = message }); } 4. 加入提交前的数据校验函数 为options对象添加 beforeSubmit属性 复制代码 代码如下 : var options = { //target : '#output1', // élément(s) cible(s) à mettre à jour avec la réponse du serveur beforeSubmit : checkData, // rappel de pré-soumission succès : callBackFunc // rappel après la soumission

// autres options disponibles : //url : url // remplacement de l'attribut 'action' du formulaire //tapez : tapez // 'obtenir ' ou 'post', remplacez l'attribut 'method' du formulaire //dataType : null // 'xml', 'script' ou 'json' (type de réponse attendu du serveur) //clearForm : true / / effacer tous les champs du formulaire après une soumission réussie //resetForm: true // réinitialiser le formulaire après une soumission réussie

// Les options $.ajax peuvent également être utilisées ici, par exemple : // délai d'attente : 3000 } ; // rappel de pré-soumission function checkData(formData, jqForm, options) { // formData est un tableau ; ici, nous utilisons $.param pour le convertir en chaîne afin de l'afficher // mais le plugin de formulaire le fait automatiquement pour vous lorsqu'il soumet les données //var queryString = $.param(formData);

// jqForm est un objet jQuery encapsulant l'élément de formulaire. Pour accéder à l'élément // élément DOM du formulaire, procédez comme suit : var formElement = jqForm[0];

//alert('About to submit: nn' queryString);

// ici, nous pourrions renvoyer false pour empêcher la soumission du formulaire ; // renvoyer autre chose que false permettra à la soumission du formulaire de continuer //return true ; if ($(formElement).find("#username").val() == "") { alert("veuillez saisir votre nom d'utilisateur!"); return false ; } else { return true ; } } 验证用户名是否为空 ， 是则提示输入 ， 并取消表单提交。