Maison > Article > interface Web > Qu'est-ce que jquery.form.js
Qu'est-ce que jquery.form.js
- 藏色散人original
- 2021-11-11 10:51:371680parcourir
jquery.form.js est un plug-in de formulaire qui prend en charge la soumission de formulaires ajax et le téléchargement de fichiers ajax. Sa méthode de référence est telle que "8f537151dbb35229fea73b1ffc9e4641< /script>" .
L'environnement d'exploitation de cet article : système Windows7, jquery version 1.6.2, ordinateur DELL G3
Qu'est-ce que jquery.form.js ?
jQuery.form.js utilise
jQuery.form.js est un plug-in de formulaire qui prend en charge la soumission de formulaires ajax et le téléchargement de fichiers ajax.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.6.2.js"></script>
<script src="~/Scripts/jQuery.form.js"></script>
</head>
<body>
<div>
<form id="ajaxForm" method="post" action="/Home/Index" enctype="multipart/form-data">
<input type="text" name="name" />
<input type="text" name="sex" />
<input type="file" name="file" />
<button type="submit" id="btnSubmit">提交1</button>
</form>
<button id="btnButton" type="button">提交2</button>
</div>
<script type="text/javascript">
$(function () {
$("#ajaxForm").ajaxForm(function () {
alert("提交成功1");
});
$("#ajaxForm").submit(function () {
$(this).ajaxSubmit(function () {
alert("提交成功1");
});
return false;
});
$("#btnButton").click(function () {
$("#ajaxForm").ajaxSubmit(function () {
alert("提交成功2");
});
return false;
});
});
</script>
</body>
</html>| ajaxForm | Ajoutez tous les écouteurs d'événement requis pour préparer la soumission du formulaire ajax. ajaxForm ne peut pas soumettre le formulaire. Dans la fonction prête du document, utilisez ajaxForm pour préparer la soumission ajax du formulaire. | Accepte 0 ou 1 paramètres. Le paramètre peut être une fonction de rappel ou un objet Options. | $("#formid").ajaxForm(); |
| ajaxSubmit | Utilisez ajax pour soumettre le formulaire. | Accepte 0 ou 1 paramètres. Le paramètre peut être une fonction de rappel ou un objet Options. |
$("#formid").ajaxSubmit(); ou $("#formid").submit(function(){ $(this).ajaxSubmit(); return false; }); |
| formSerialize | Sérialisez (ou sérialisez) le formulaire dans une chaîne de requête. Cette méthode renverra une chaîne au format suivant : nom1=valeur1&nom2=valeur2. | None | $("#formid").formSerialize(); |
| fieldSerialize | Sérialisez (ou sérialisez) les éléments de champ du formulaire dans une chaîne de requête. Ceci est pratique lorsque seuls certains champs du formulaire doivent être sérialisés (ou sérialisés). Renvoie une chaîne au format suivant : name=value1&name2=value2. | None | $("#formid .specialFields").fieldSerialize(); |
| fieldValue | Renvoie la valeur de l'élément de formulaire qui correspond au tableau inséré. Cette méthode renvoie les données sous forme de tableau. Si la valeur de l’élément est potentiellement invalide, le tableau est vide. | Aucun | $("#formid :password").fieldValue(); |
| resetForm | Restaurer le formulaire à son état initial. | Aucun | $("#formid").resetForm(); |
| clearForm | Effacer l'élément de formulaire. Cette méthode videra tout le texte, le mot de passe et la zone de texte, effacera la sélection dans l'élément de sélection et réinitialisera tous les boutons radio et cases à cocher à l'état non sélectionné. | Aucun | $("#formid").clearForm(); |
| clearFields | Effacer les éléments du champ. Pratique lorsque seuls certains éléments du formulaire doivent être effacés. | None | $("#formid .specialFields").clearFields(); |
Objet Options
ajaxForm et ajaxSubmit prennent en charge de nombreux paramètres d'option, qui peuvent être fournis à l'aide d'un objet Options.
| target | Indique les éléments de la page qui sont mis à jour en réponse au serveur. La valeur de l'élément peut être spécifiée sous la forme d'une chaîne de sélection jQuery, d'un objet jQuery ou d'un élément DOM. | Valeur par défaut : null |
| url | Spécifiez l'URL pour soumettre les données du formulaire. | Valeur par défaut : la valeur de l'attribut d'action du formulaire |
| type | Spécifie la méthode pour soumettre les données du formulaire : "GET" ou "POST". | Valeur par défaut : GET |
| beforeSubmit | La fonction de rappel appelée avant la soumission du formulaire. Si la fonction de rappel renvoie false, le formulaire ne sera pas soumis. La fonction de rappel prend trois paramètres d'appel : les données du formulaire sous la forme d'un tableau, l'objet de formulaire jQuery et l'objet Options transmis dans ajaxForm/ajaxSubmit. | Valeur par défaut : null |
| success | La fonction de rappel appelée une fois le formulaire soumis avec succès. Ensuite, la valeur de l'option dataType détermine si la valeur de ResponseText ou ResponseXML est renvoyée. | Valeur par défaut : null |
| dataType | Type de données renvoyé : un parmi null, "xml", "script", "json". | Valeur par défaut : null |
| resetForm | indique s'il faut réinitialiser si le formulaire est soumis avec succès. | Valeur par défaut : null |
| clearForm | indique s'il faut effacer les données du formulaire si le formulaire est soumis avec succès. |
var options={
target : '#output', // 把服务器返回的内容放入id为output的元素中
beforeSubmit : showRequest, // 提交前的回调函数
success : showResponse, // 提交后的回调函数
// url : url, //默认是form的action，如果申明，则会覆盖
// type : type, // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖
// dataType : null, // html（默认）、xml、script、json接受服务器端返回的类型
// clearForm : true, // 成功提交后，清除所有表单元素的值
// resetForm : true, // 成功提交后，重置所有表单元素的值
timeout : 3000 // 限制请求的时间，当请求大于3秒后，跳出请求
}
function showRequest(formData, jqForm, options){
// formData: 数组对象，提交表单时，form插件会以ajax方式自动提交这些数据，格式如[{name:user,value:val},{name:pwd,value:pwd}]
// jqForm: jQuery对象，封装了表单的元素
// options: options对象
var queryString=$.param(formData); // name=1&address=2
var formElement=jqForm[0]; // 将jqForm转换为DOM对象
var address=formElement.address.value; // 访问jqForm的DOM元素
return true; // 只要不返回false，表单都会提交，在这里可以对表单元素进行验证
}
function showResponse(responseText,statusText){
// dataType=xml
var name=$("name",responseXML).text();
var address=$("address",responseXML).text();
$("#xmlout").html(name+" "+address);
// dataType=json
$("#jsonout").html(data.name+" "+data.address);
}Apprentissage recommandé : "Tutoriel vidéo jquery"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery lt qu'est-ce que ça veut direArticle suivant：jquery lt qu'est-ce que ça veut dire