Utiliser ajax pour soumettre des formulaires basés sur jQuery via les compétences du plug-in_javascript jQuery.form.js

Lorsque nous soumettons le formulaire, si nous n'utilisons pas ajax pour soumettre, la page s'actualisera d'elle-même, ce qui est très peu convivial, nous devons donc modifier notre soumission de formulaire en mode ajax pour que les utilisateurs sachent clairement qu'ils sont en mode At à quelle étape le formulaire est-il soumis : Soumission ? Soumission réussie ?

Je l'ai utilisé brièvement. Le plug-in jQuery Form présente les avantages suivants :

1. Prise en charge de la vérification avant la soumission

2. Rappel du support après soumission

3. Adoptez la méthode AJAX et ayez une bonne expérience utilisateur

4. La méthode de soumission est flexible. Spécifiez simplement l'ID du formulaire à soumettre. Vous pouvez soumettre ce formulaire si vous souhaitez le soumettre en même temps.

5. Prend en charge la soumission de plusieurs types de données tels que : xml, json, etc.

Fonctions principales :

1.ajaxForm

Ajoutez tous les écouteurs d'événements requis pour préparer le formulaire pour la soumission 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. ajaxForm accepte 0 ou 1 paramètres. Ce paramètre unique peut être soit une fonction de rappel, soit un objet Options.

Exemple :

$('#myFormId').ajaxForm();

2.ajaxSubmit

Le formulaire sera soumis immédiatement via AJAX. Dans la plupart des cas, ajaxSubmit est appelé pour répondre à l'utilisateur qui soumet le formulaire. ajaxSubmit accepte 0 ou 1 paramètres. Ce paramètre unique peut être soit une fonction de rappel, soit un objet Options.

Exemple :

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航（<span style="color: #333333;"><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" target="_blank"><span style="color: #333333;">防止页面刷新</span></a></span>？）返回false
return false;
});

3.formSerialize

Sérialisez (ou sérialisez) le formulaire en une chaîne de requête. Cette méthode renverra une chaîne au format suivant : nom1=valeur1&nom2=valeur2. Cette méthode renvoie une chaîne.

Exemple :

var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

4.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). Cette méthode renverra une chaîne au format suivant : nom1=valeur1&nom2=valeur2. Cette méthode renvoie une chaîne.

Exemple :

var queryString = $('#myFormId .specialFields').fieldSerialize();

5.fieldValue

Renvoie la valeur de l'élément de formulaire qui correspond au tableau inséré. Depuis la version 0.91, cette méthode renverra toujours les données sous forme de tableau. Si la valeur de l'élément est jugée potentiellement invalide, le tableau est vide, sinon il contient une ou plusieurs valeurs d'élément. Cette méthode renvoie un tableau.

Exemple :

// 取得密码输入值
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

6.resetForm

Restaurez le formulaire à son état initial en appelant la méthode DOM d'origine de l'élément du formulaire.

Exemple :

$('#myFormId').resetForm();

7.clearForm

Effacer les éléments du formulaire. Cette méthode efface tous les champs de saisie de texte, les champs de saisie de mot de passe et les champs de zone de texte, efface la sélection dans tous les éléments de sélection et efface tous les boutons radio et les boutons de sélection multiple (case à cocher) réinitialisés à leur état non sélectionné.

Exemple :

$('#myFormId').clearForm();

8.clearFields

Effacer les éléments du champ. Il est pratique de l'utiliser uniquement lorsque certains éléments du formulaire doivent être effacés.

Exemple :

$('#myFormId .specialFields').clearFields();

Exemple simple de plugin jQuery Form :

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>My Jquery</title>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
  <script type="text/javascript"> 
  // wait for the DOM to be loaded
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function
      $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
      }); 
    }); 
    // attach handler to form's submit event 
    $('#myFormId').submit(function() {   
     // submit the form   
     $(this).ajaxSubmit();   
     // return false to prevent normal browser submit and page navigation   
     return false; 
    });
  </script>
</head>
<body>
  <form id="myForm" action="index.jsp" method="post">
  Name: <input type="text" name="name" />
  Comment:<textarea name="comment"></textarea>
  <input type="submit" value="Submit Comment" />
  </form>
</body>
</html>

Cet article présente en détail comment jQuery utilise ajax pour soumettre des formulaires via le plug-in jQuery.form.js. J'espère qu'il vous plaira.