Comment jquery+ajax implémente la mise à jour des données

Cette fois, je vais vous montrer comment implémenter la mise à jour des données avec jquery+ajax. Quelles sont les précautions pour que jquery+ajax implémente la mise à jour des données. Voici un cas pratique, jetons un coup d'œil.

Contexte de l'application

Utiliser SpringbootarchitectureDans la présentation de l'interface comme indiqué ci-dessous, pour enregistrer ou mettre à jour les données, vous devez les soumettre à Comment un succès ou un échec rapide en arrière-plan ? Si vous utilisez le mode springmvc traditionnel, vous devez passer une page au front-end. Cette page vous demande uniquement si l'opération a réussi ! Après l'invite, les données doivent être mises à jour, tout comme certaines invites données lorsque nous parcourons certains sites Web L'opération est réussie et sera renvoyée après 5 secondes.

C’est stupide et l’expérience client est médiocre.

Processus de transformation

L'utilisation d'ajax peut-elle résoudre les problèmes ci-dessus ?

La réponse est oui. Après avoir cliqué sur Enregistrer, une requête ajax est effectuée en arrière-plan, en utilisant la balise ResponseBody pour limiter le retour aux seules données. Ensuite, donnez simplement les informations d'invite correspondantes en fonction des données renvoyées.

Les données de requête ajax traditionnelles nécessitent de réorganiser les données dans le formulaire et de tout mettre dans le corps de notre requête. Comme indiqué dans le code suivant :

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

Si les données du formulaire que je soumets sont relativement volumineuses, alors les données seront relativement volumineuses. Le code est relativement volumineux. Dans le même temps, la forme a également perdu son sens d'existence.

Existe-t-il une manière plus élégante d'implémenter la soumission d'un formulaire ajax ? certainement.

Le plug-in ajaxform de jquery est un relativement bon choix.

Processus de mise en œuvre

La première étape. Bien sûr, nous présentons nos puissants plug-ins.

<script src="static/assets/js/jquery.form.min.js"></script>

Pour télécharger le js, je vous fournirai l'adresse github : https://github.com/jquery-form/form.

Deuxième étape. Envoyez la demande ajax+form à l’endroit où nous souhaitons envoyer la demande.

function insert() {
    var options = {
     // target:  '#output1', // 用服务器返回的数据 更新 id为output1的内容.
     // beforeSubmit: showRequest, // 提交前
     success:  showResponse, // 提交后
     //另外的一些属性:
     //url:  url   // 默认是form的action，如果写的话，会覆盖from的action.
     //type:  type  // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
     //dataType: null  // 'xml', 'script', or 'json' (接受服务端返回的类型.)
     //clearForm: true  // 成功提交后，清除所有的表单元素的值.
     resetForm: false  // 成功提交后，重置所有的表单元素的值.
     //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
     //当请求大于3秒后，跳出请求.
     //timeout: 3000
    };
    //'ajaxForm' 方式的表单 .
    $('#baseForm').ajaxSubmit(options);
   }

Traitez la méthode renvoyée après la soumission

// 提交后
   function showResponse(responseText, statusText) {
    alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText);
    
   }

Code d'implémentation en arrière-plan

@RequestMapping("/basicSave")
 @ResponseBody
 public String BasicSave(PointInfo pi){
  if(!pi.getSaddress().equals("")){
   pi.setType("1");
  }else{
   pi.setType("0");
  }
  int newId = pointInfoService.saveorupdate(pi);
  return newId+"";
 }

Définissez la logique par vous-même

Remarque

• Assurez-vous d'utiliser la méthode ajaxSubmit lors de la soumission

• Action soumise, méthode de demande (post ou get), dataType (json, xml), etc. utilisent les données du formulaire par défaut. Si elles sont modifiées dans les paramètres, elles seront écrasées.

Recherche de suivi

À propos de la boîte d'invite

Utiliser l'alerte ? J'ai fait de mon mieux pour utiliser bootstrap Si vous créez une alerte ici, c'est comme cracher sur une assiette de nourriture délicieuse. Existe-t-il une plus belle boîte de dialogue ? Bien sûr, la réponse est oui !

Utilisez le plug-in de notifications pour embellir la boîte de dialogue

D'abord le rendu :

Étapes de mise en œuvre

1. Importez les js et css requis pour les notifications

<script src="static/assets/plugins/notifyjs/dist/notify.min.js"></script>
 <script src="static/assets/plugins/notifications/notify-metro.js"></script>
 <script src="static/assets/plugins/notifications/notifications.js"></script>
 <link href="static/assets/plugins/notifications/notification.css" rel="external nofollow" rel="stylesheet">

2. Appelez simplement l'interface

$.Notification.notify('success','top center', '温馨提示', '保存成功！');

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Demande ajax dans jquery et réponse ajax dans servlet

Utilisez jquery pour faire fonctionner la zone de saisie. le contenu textuel de

obtient l'effet de lien entre la zone de saisie et la zone déroulante

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!