La soumission du formulaire jquery ajax ne rafraîchit pas la page

Dans le développement Web, la soumission de formulaire est une opération très courante et, généralement, la soumission du formulaire est effectuée par l'actualisation de la page. Cependant, que se passe-t-il si vous ne souhaitez pas actualiser la page après avoir soumis le formulaire ? Cet article explique comment utiliser jQuery et Ajax pour implémenter la soumission de formulaire sans actualiser la page.

1. Pourquoi ne pas actualiser la page

Dans le processus traditionnel de soumission de formulaire, les utilisateurs doivent attendre patiemment que la page soit actualisée, ce qui rend l'expérience utilisateur très lourde. Si la page est actualisée, l'utilisateur devra peut-être saisir à nouveau le contenu du formulaire qu'il a rempli auparavant, ce qui le rendra insatisfait. De plus, l'actualisation de la page peut également entraîner la perte de certaines données, ce qui entraînera également des problèmes inutiles pour les utilisateurs.

Par conséquent, la mise en œuvre de la soumission de formulaire sans actualiser la page via Ajax peut améliorer efficacement l'expérience utilisateur et économiser du temps et de l'énergie aux utilisateurs.

2. Étapes de mise en œuvre

Ensuite, nous utiliserons les étapes suivantes pour mettre en œuvre la soumission du formulaire sans actualiser la page.

1. Écoutez l'événement de soumission du formulaire

Tout d'abord, nous devons lier une fonction d'écoute pour l'événement de soumission sur le formulaire, afin que le formulaire puisse être soumis via JavaScript. Dans le même temps, nous devons empêcher le comportement de soumission de formulaire par défaut du navigateur en renvoyant false. Le code est le suivant :

$('form').submit(function() { 
  // ajax 表单提交代码... 
  return false; 
}); 

2. Obtenir les données du formulaire

Ensuite, nous devons obtenir les données du formulaire via la méthode serialize() de jQuery. Cette méthode sérialise toutes les données du formulaire dans une chaîne à utiliser dans les requêtes Ajax ultérieures. Le code est le suivant :

var formData = $('form').serialize(); 

3. Envoyer une requête Ajax

Maintenant, nous devons envoyer une requête asynchrone via la méthode ajax() de jQuery pour soumettre le formulaire sans actualiser la page. Le code est le suivant :

$.ajax({ 
  type: 'POST', 
  url: 'submit.php', 
  data: formData, 
  success: function(result) { 
    // 处理返回的数据 
  } 
}); 

Dans cette méthode ajax(), nous définissons les paramètres suivants :

• type : Le type de requête. Dans cet exemple, nous avons choisi la méthode POST. type：请求的类型。在此例中，我们选择了 POST 方法。
• url：请求的目标 URL。这里是 submit.php，代表表单提交后将数据发送到该 PHP 文件中。
• data：发送给服务器的数据。我们使用了之前获取的表单数据 formData。
• success
url : L'URL cible de la requête. Voici submit.php, qui représente le fichier PHP qui enverra les données après la soumission du formulaire.

data : Données envoyées au serveur. Nous avons utilisé les données du formulaire obtenues précédemment, formData.
4. succès : fonction de rappel une fois la requête réussie. Dans cette fonction, nous pouvons traiter les données renvoyées par le serveur en conséquence.

Traitez les données renvoyées par le serveur

• Lorsque le serveur renvoie les données, nous pouvons les traiter dans la fonction de rappel de réussite. Par exemple, nous pouvons afficher les données renvoyées par le serveur sur la page, ou modifier le statut de la page via JavaScript. Le code est le suivant :

success: function(result) { 
  // 处理返回的数据： 
  alert(result); 
  $('form')[0].reset(); 
} 

• Dans cette fonction de rappel, nous effectuons deux opérations sur les données renvoyées par le serveur :

Utilisez la méthode alert() de JavaScript pour afficher une boîte de dialogue dont le contenu est les données renvoyées par le serveur.

Réinitialisez le formulaire via la méthode reset() de jQuery pour permettre aux utilisateurs de remplir de nouvelles données.

À ce stade, grâce aux quatre étapes ci-dessus, nous avons réussi à mettre en œuvre la soumission du formulaire sans actualiser la page.

1. 3. Notes

Bien que la soumission de formulaires via Ajax puisse grandement améliorer l'expérience utilisateur, il y a également certaines choses auxquelles il faut prêter attention lors de l'utilisation :

Empêcher la soumission répétée de formulaires

Étant donné que les requêtes Ajax sont asynchrones , Par conséquent, lorsque les utilisateurs cliquent fréquemment sur le bouton Soumettre, le formulaire peut être soumis à plusieurs reprises. Pour éviter ce problème, nous pouvons désactiver le bouton d'envoi du formulaire lors de l'envoi de la requête Ajax et l'activer une fois la requête terminée. Le code est le suivant :

$('form').submit(function() { 
  // 禁用按钮 
  $('input[type="submit"]', this).attr('disabled', 'disabled'); 

  // ajax 表单提交代码... 

  // 启用按钮 
  $('input[type="submit"]', this).removeAttr('disabled'); 
}); 

Gestion des erreurs renvoyées par le serveur

Dans les requêtes Ajax, si le serveur renvoie un code d'état incorrect, nous devons traiter ces erreurs en temps opportun. Normalement, nous pouvons juger de l'état renvoyé par le serveur via les données de la fonction de rappel de réussite et effectuer un traitement ultérieur en fonction de la situation spécifique. Par exemple, lorsque le code d'état renvoyé par le serveur est 401, cela peut signifier que l'utilisateur n'est pas connecté. Dans ce cas, nous devons connecter l'utilisateur via un saut de page pour continuer à accéder. 🎜

success: function(result) { 
  if (result.status === 'success') { 
    alert('提交成功'); 
    $('form')[0].reset(); 
  } else if (result.status === 'failed') { 
    alert('提交失败'); 
  } else if (result.status === 'error') { 
    alert('发生了错误：' + result.message); 
  } 
} 

🎜4. Résumé 🎜🎜Cet article explique comment utiliser jQuery et Ajax pour implémenter la soumission de formulaire sans actualiser la page. En écoutant l'événement de soumission du formulaire, en obtenant les données du formulaire, en envoyant une requête Ajax et en traitant les données renvoyées par le serveur, nous pouvons implémenter une soumission de formulaire sans actualiser la page et améliorer considérablement l'expérience utilisateur. Bien entendu, vous devez également faire attention à certains problèmes potentiels lors de son utilisation, tels que la prévention de la soumission répétée de formulaires et la gestion des erreurs renvoyées par le serveur. J'espère que cet article vous aidera à mettre en œuvre la soumission de formulaire sans actualiser la page. 🎜

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!