J'ai déployé le projet et l'ai joué. Aujourd'hui, j'ai amélioré la fonction de modification de la quantité de produits dans le panier pour mettre à jour partiellement le prix total correspondant. Tout le monde sait que cela doit être mis en œuvre avec Ajax. Je n'ai jamais appris Ajax auparavant, et je viens d'utiliser cette petite fonction pour simplement apprendre les connaissances de l'Ajax.
1. Analyse du problème
Jetons un coup d'œil à la situation sur la page:
La fonction est comme ci-dessus. Avant qu'Ajax ne soit disponible, vous recherchez généralement une action en fonction de la valeur modifiée de l'utilisateur, puis revenez à la nouvelle page JSP pour recharger la page entière pour terminer la mise à jour des numéros. Mais avec la technologie Ajax, nous pouvons utiliser la technologie Ajax pour rafraîchir partiellement les modifications de l'endroit que nous voulons changer, au lieu de recharger toute la page. Tout d'abord, jetons un coup d'œil au code de la partie JSP correspondant à l'image ci-dessus:
<div> <! - CART DE SHOTS -> <div id = "shopping_cart"> <div> mon panier </ div> <Table CellPadding = "0" Cellpacing = "0"> <tr> <th> Numéro de produit </th> <th Colspan = "2"> Nom du produit </th> <th </tr> <c: foreach items = "$ {sessionscope.Forder.sorders}" var = "Sorder" vastatus = "num"> <tr Lang = "$ {sorder.product.id}"> <td> <a href = "#"> $ {num.count} </a> </td> <td> src = "$ {shop} / files / $ {sorder.product.pic}" /> </td> <td> <a href = "#"> $ {Sorder.name} </a> </td> <td> $ {SORDER.PRICE} </a> <td> <! Value = "$ {Sorder.number}" Lang = "$ {sorder.number}"> </td> <td> $ {sorder.price * Sorder.number} </td> <td> <a href = "#"> </a> </td> </tr> </c: foreach> </ Table> <! id = "total-table"> <tbody> <tr> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = ""> <strong> ￥ <span id = "total"> $ {sessionscope.Forder.total} </span> </strong> </td> </tr> <tr> <total colspan = "1"> freight </td> <td style = ""> ￥ <span id = "yunfei"> 0,00 </span> </pd> </tr> <tr> <td Colspan = "1"> <strong> total </strong> </td> <td style = "> ￥ < id = "Totalall"> <strong> $ {Sessionscope.Forder.Total} </strong> </span> </td> </tr> </pbody> </sable> <div> <font> <a href = "$ {shop} /user/confirm.jsp"> <Button = "Button" Style = "background-Color: # f38256;" Confirmation </ Button> </a> </font> <font> <a href = "#"> <Button type = "Button"> <font> Effacez le panier </font> </fonton> </font> <a href = "$ {shop} /index.jsp"> <Button Type = "Button"> <font> style = "Clear: à la fois"> </div> </div> </div> </div> </div> </div> </div> </div>Cela ressemble beaucoup, mais la fonction est en fait très simple. Il élimine simplement les données correspondantes du domaine pour l'afficher. Si nous voulons implémenter les fonctions décrites ci-dessus, analysons d'abord les idées:
Tout d'abord, vous devez enregistrer un événement: c'est-à-dire que l'événement déclenché par la zone de texte dans le numéro est modifié;
Dans cet événement, nous obtenons l'entrée du nombre par l'utilisateur et jugeons la légalité de l'entrée, car nous devons empêcher l'utilisateur d'entrer au hasard;
Si légal, envoyez des données à l'arrière-plan via la demande AJAX;
L'arrière-plan appelle la méthode de logique métier correspondante pour obtenir de nouveaux résultats pour un nouveau numéro et le renvoie au premier plan via le flux;
Une fois qu'Ajax a reçu le résultat, il met à jour les données à l'emplacement correspondant. L'ensemble du processus est terminé.
S'il est illégal, le nombre avant la modification est affiché. Aucun traitement n'est effectué
2. Implémentation des demandes AJAX
Après avoir analysé le processus, nous commencerons à l'implémenter. Tout d'abord, collez le code de la partie JS ici, puis nous l'analysons en détail en fonction du processus ci-dessus:
<script type = "text / javascript"> $ (function () {// 1. Register l'événement $ (". text"). Change (function () {// 2. Vérifiez la validité du nombre de données var = this.value; // vous pouvez également utiliser $ (this) .val (); // isnan (nombre) signifie que si le nombre n'est pas un nombre, ne revient pas si (! estnan (nombre) &&&&&AT (Nombre) = numéro) && numéro> 0) {// Si c'est légal, le numéro de manière synchrone $ (this) .attr ("lang", numéro); id du produit, et renvoyez le prix total après la quantité modifiée $ .post ("sorder_updatesOrder.action", {nombre: nombre, 'product.id': pid}, fonction (total) {$ ("# total"). html (total); // subtotal de tous les produits var yunfei = $ ("# yunfei"). html (); $ ("# totalall"). Html ((total * 1 + yunfei * 1) .tofixed (2)); // Calculez le sous-total d'un seul produit, conservant deux décimales var prix = ($ (this) .parent (). Prev (). Html () * numéro) .tofixed (2); $ (this) .parent (). next (). html (prix); } else {// si elle est illégale, restaurez le nombre qui légal }})})}) </script>2.1 Événement d'inscription
Nous pouvons voir que l'événement d'enregistrement doit d'abord être positionné dans cette zone de texte. Ici, il est positionné par le sélecteur de classe. Parce qu'il s'agit d'une zone de texte, Change () est utilisée pour enregistrer l'événement, puis définir une fonction fonction () pour gérer l'événement.
2.2 Jugez la légalité des données
OK, après avoir enregistré l'événement, nous devons d'abord porter un jugement sur la légalité du numéro saisi par l'utilisateur, car l'utilisateur peut entrer 0 ou des nombres négatifs, peut entrer des décimales, ou même des lettres ou d'autres caractères, etc. La vérification est donc requise. Isnan (numéro) signifie que si le nombre n'est pas un nombre, il renvoie true. Nous pouvons utiliser cette fonction pour déterminer s'il s'agit d'un nombre; PARSEINT (Numéro) signifie arrondir le tableau puis le comparer avec lui-même. Nous utilisons intelligemment cela pour déterminer si le nombre est un entier.
2.3 Envoyer une demande Ajax
Si les données sont légales, après avoir obtenu les données, nous pouvons envoyer une demande AJAX à l'arrière-plan. Nous devons considérer une question: quels paramètres devons-nous passer? Tout d'abord, si l'utilisateur souhaite mettre à jour la quantité, il ne fait aucun doute que les numéros entrés par l'utilisateur doivent être transmis. Deuxièmement, quel produit doit être transmis? En d'autres termes, nous devons obtenir le numéro d'identification du produit que l'utilisateur souhaite modifier. Après avoir connu les paramètres à transmettre, nous pouvons trouver un moyen d'obtenir le numéro d'identification.
Il y a une question ici. Les utilisateurs peuvent avoir plus d'un produit dans leur panier. Naturellement, ils penseront que ce serait formidable s'ils pouvaient obtenir l'identification de différents produits avec une déclaration. Par conséquent, ils ont pensé à utiliser la balise parent de la zone de texte. Parce que les balises parentaux de différents produits sont les mêmes, ce sont les premières balises <tr>, donc nous mettons l'ID du produit dans l'attribut Lang dans la balise <tr>, pourquoi le mettre dans l'attribut Lang? Étant donné que l'attribut Lang n'est essentiellement pas utilisé, il est utilisé pour définir les langues, et l'utilisation de l'attribut Lang n'est pas facile à entreprendre avec d'autres attributs ~ de cette manière, nous pouvons obtenir l'ID du produit via $ (this) .parents ("tr: premier"). Att ("lang");
Ensuite, commencez à envoyer des demandes AJAX, en les envoyant à l'aide de la méthode Post. Il y a quatre paramètres dans la méthode post:
Le premier paramètre est l'action à envoyer
Le deuxième paramètre est le paramètre à passer, en utilisant le format JSON
Le troisième paramètre est une fonction (résultat), qui est utilisée pour recevoir des données passant par l'arrière-plan.
La quatrième méthode consiste à spécifier le type de données à recevoir. JSON signifie recevoir des données JSON, et le texte signifie recevoir un flux
Le total retourné de l'arrière-plan est le prix total de tous les produits, donc dans la fonction, nous obtenons d'abord les éléments de tous les sous-totaux de produits en fonction de l'ID et attribuons la valeur au total. Totalall est le prix total avec le fret ajouté. Ce dernier tofixes (2) signifie conserver deux décimales. Obtenez ensuite l'élément d'un sous-total d'un seul produit et calculez le sous-total d'un seul produit. De cette façon, la page de réception met à jour la pièce que nous voulons mettre à jour sans recharger. C'est la partie puissante de l'Ajax. C'est la même chose que l'EasyUi précédent, qui est également une demande Ajax.
D'accord, la partie Ajax est introduite ici. Ce qui suit est le traitement en arrière-plan de la demande en ce moment, qui est pour mon propre projet et est utilisé pour enregistrer la progression du projet.
3. Mise à jour du backend
L'action demandée par Ajax tout à l'heure est la méthode updatesOrder () dans tridAction, nous allons donc sur SorderAction pour compléter la méthode UpdaSOrder ():
@ Controller @ Scope ("Prototype") public class Sorderaction étend BaseAction <Sorder> {public String AddSorder () {// Omit Code non pertinent ... // Mette à jour la quantité de produits en fonction du numéro de produit Public String UpdaSesOrder () {FORDER FORD = (FORDER) Session.get ("FORDER"); // Mette à jour l'article d'achat, le produit.id passé est encapsulé dans le modèle FORDER = SORDERSERVICE.UpDaSESORD (modèle, fourder); // Calculez le nouveau prix total Frander.SetTotal (Forderservice.Clutotal (Frander)); Session.put ("Frander", fourder); // Renvoie le nouveau prix total sous la forme d'un flux InputStream = New ByteArrayInputStream (FORDER.GetTotal (). ToString (). GetBytes ()); retourner "Stream"; }}Les méthodes correspondantes du service sont améliorées comme suit:
// Interface Sorderservice Interface publique Sorderservice étend BaseService <Sorder> {// Enregistrer le code non pertinent ... // Mette à jour la quantité de produit en fonction de l'ID du produit et de la quantité de mise à jour publique de Public Forder (Sorder Soorder, Ford Frander); implémente Sorderservice {// omettre le code non pertinent ... @Override public forder updatesOrder (Sorder Soorder, fourder Foder) {for (Sorder temp: fourder.getsorders ()) {if (temp.getProduct (). GetId (). }} return stand; }}Enfin, la configuration dans le fichier strut.xml est d'attribuer "Stream" à <lobal-Result>, comme suit
<nom-Results> <! - Enregistrer d'autres configurations publiques -> <result name = "stream" type = "stream"> <param name = "inputName"> inputStream </onsam> </sult> </lobal-résults>
D'accord, maintenant le prix total calculé dans l'action peut être transmis à la réception par la forme d'un flux, Ajax peut être reçu dans sa fonction, placé au total et connecté à l'avant.
Lien original: http://blog.csdn.net/eson_15/article/details/51487323
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.