Ich habe das Projekt eingesetzt und es gespielt. Heute habe ich die Funktion der Änderung der Produktmenge im Einkaufswagen verbessert, um den entsprechenden Gesamtpreis teilweise zu aktualisieren. Jeder weiß, dass dies mit Ajax implementiert werden muss. Ich habe Ajax noch nie gelernt und habe diese kleine Funktion einfach verwendet, um einfach Ajax -Wissen zu lernen.
1. Analyse des Problems
Schauen wir uns die Situation auf der Seite an:
Die Funktion ist wie oben. Bevor Ajax nicht verfügbar ist, suchen Sie normalerweise nach Aktion basierend auf dem geänderten Wert des Benutzers und kehren dann zur neuen JSP -Seite zurück, um die gesamte Seite neu zu laden, um die Aktualisierung der Nummern abzuschließen. Mit der AJAX -Technologie können wir die Ajax -Technologie jedoch verwenden, um die Änderungen an der Stelle, die wir ändern möchten, teilweise zu aktualisieren, anstatt die gesamte Seite neu zu laden. Schauen wir uns zunächst den Code des JSP -Teils an, der dem obigen Bild entspricht:
<div> <!-Einkaufswagen-> <div id = "copping_cart"> <div> Mein Einkaufswagen </div> <table cellpadding = "0" cellpacing = "0"> <tr> <Th> Produktnummer </th> <th colspan = "2"> Produktname </th> Verkaufspreis </Th> <Th>. </tr> <c: foreach items = "$ {sissionscope.forder.SOrderers}" var = "sorder" varstatus = "num"> <tr Lang = "$ {Sorder.Product.id}"> <td> <a href = "#"> $ {num.count} </a> </td> </td> </td> </td> <td> <td> <imm; src = "$ {shop}/files/$ {sorder.product.pic}"/> </td> <td> <a href = "#"> $ {sorder.name} </a> </td> <td> $ {SORDER.PRICE} </td> <td> <! value="${sorder.number }" lang="${sorder.number }"> </td> <td>${sorder.price*sorder.number }</td> <td><a href="#"></a></td> </tr> </c:forEach> </table> <!-- Checkout--> <div> <table id="totals-table"> <tbody> <tr> <td colspan="1"><strong> Subtotal</strong></td> <td style=""><strong>￥<span id="total">${sessionScope.forder.total}</span> </strong></td> </tr> <tr> <td colspan = "1"> Fracht </td> <td style = ""> ￥ <span id = "yunfei"> 0,00 </span> </td> </tr> <tr> <td colspan = "1"> <strong> Gesamt </strong> </td> <td style = "> ￥ <span> id = "totalAll"> <strong> $ {sissionscope.forder.total} </strong> </span> </td> </tr> </tbody> </table> <div> <font> <a href = "$ {sHOP} /User/Confirm.jsp. confirmation</button></a> </font> <font><a href="#"> <button type="button"> <font>Clear the cart</font> </button> </font> <a href="${shop}/index.jsp"> <button type="button"> <font>Continue shopping</font> </button></a> <div style = "Clear: beide"> </div> </div> </div> </div> </div> </div> </div> </div>Es sieht nach viel aus, aber die Funktion ist eigentlich sehr einfach. Es nimmt nur die entsprechenden Daten aus der Domäne heraus, um sie anzuzeigen. Wenn wir die oben beschriebenen Funktionen implementieren möchten, analysieren wir zuerst die Ideen:
Zunächst müssen Sie ein Ereignis registrieren: Das heißt, das durch das Textfeld in der Nummer ausgelöste Ereignis wird geändert.
In diesem Fall erhalten wir die Zahleneingabe durch den Benutzer und beurteilen die Rechtmäßigkeit der Eingabe, da wir den Benutzer daran hindern müssen, zufällig einzugeben.
Wenn legal legal, senden Sie Daten über die AJAX -Anfrage an den Hintergrund.
Der Hintergrund ruft die entsprechende Geschäftslogikmethode auf, um neue Ergebnisse für eine neue Nummer zu erhalten, und gibt sie über den Stream in den Vordergrund zurück.
Nachdem Ajax das Ergebnis erhalten hat, aktualisiert es die Daten am entsprechenden Ort. Der ganze Prozess ist vorbei.
Wenn es illegal ist, wird die Nummer vor der Änderung angezeigt. Es wird keine Behandlung durchgeführt
2. Implementierung von AJAX -Anfragen
Nachdem wir den Prozess analysiert haben, werden wir damit beginnen, ihn zu implementieren. Fügen Sie zuerst den Code des JS -Teils hier ein und analysieren ihn dann basierend auf dem obigen Prozess ausführlich:
<script type = "text/javaScript"> $ (function () {// 1. Registerereignis $ (". text"). Änderung (function () {// 2. Überprüfen Sie die Gültigkeit der Daten var number = this.value; // Sie können auch $ $ verwenden. && Nummer> 0) {// Wenn es legal ist, synchron aktualisiert $ (this) .Attr ("Lang", Nummer); ID des Produkts und geben Sie den Gesamtpreis nach der modifizierten Menge $ .post ("sorder_updatesorder.action", {Nummer: Nummer, 'product.id': pid}, Funktion (Total) {$ ("#Total"). $ ("#Totalall"). HTML ((Gesamt*1 + Yunfei*1). // Berechnen Sie die Subtotale eines einzelnen Produkts, wobei zwei Dezimalstellen var price = ($ (this) .Parent (). Prev (). Html ()*nummer) .tofixed (2); $ (this) .Parent (). Next (). HTML (Preis); } else {// Wenn es illegal ist, stellen Sie die Nummer wieder her, die nur legal ist. }})})}) </script>2.1 Registrierungsveranstaltungen
Wir können sehen, dass das Registrierungsereignis zuerst auf dieses Textfeld positioniert werden muss. Hier wird es über den Klassenwählers positioniert. Da es sich um ein Textfeld handelt, wird Change () verwendet, um das Ereignis zu registrieren und dann eine Funktion () zu definieren, um das Ereignis zu verarbeiten.
2.2 Bestimmen Sie die Legalität von Daten
OK, nach der Registrierung des Ereignisses müssen wir zunächst ein Urteil über die Rechtmäßigkeit der vom Benutzer eingegebenen Nummer machen, da der Benutzer 0 oder negative Zahlen eingeben kann, Dezimalstellen oder sogar Buchstaben oder andere Zeichen usw. eingeben kann. Daher ist eine Überprüfung erforderlich. Isnan (Nummer) bedeutet, dass, wenn die Zahl keine Zahl ist, es true zurückgibt. Wir können diese Funktion verwenden, um festzustellen, ob es sich um eine Zahl handelt. ParseInt (Nummer) bedeutet, das Array abzurunden und dann mit sich selbst zu vergleichen. Wir verwenden dies geschickt, um festzustellen, ob die Zahl eine Ganzzahl ist.
2.3 AJAX -Anfrage senden
Wenn die Daten legal sind, können wir nach Erhalt der Daten eine AJAX -Anfrage an den Hintergrund senden. Wir müssen eine Frage in Betracht ziehen: Welche Parameter müssen wir bestehen? Wenn der Benutzer die Menge aktualisieren möchte, besteht kein Zweifel daran, dass die vom Benutzer eingegebenen Zahlen übertragen werden müssen. Zweitens sollte welches Produkt übertragen werden? Mit anderen Worten, wir müssen die ID -Nummer des Produkts erhalten, die der Benutzer ändern möchte. Nachdem wir die zu übertragenden Parameter kennen, finden wir einen Weg, um die ID -Nummer zu erhalten.
Hier gibt es eine Frage. Benutzer haben möglicherweise mehr als ein Produkt in ihrem Warenkorb. Natürlich werden sie denken, dass es großartig wäre, wenn sie die ID verschiedener Produkte mit einer Erklärung erhalten könnten. Daher dachten sie daran, das übergeordnete Tag des Textfelds zu verwenden. Da die übergeordneten Tags verschiedener Produkte gleich sind, sind sie die ersten <tr> -Tags, sodass wir die ID des Produkts in das Lang -Attribut in das <tr> -Tag einfügen. Warum sollten wir sie in das Lang -Attribut einfügen? Da das Lang -Attribut im Grunde nicht verwendet wird, wird es zum Definieren von Sprachen verwendet, und die Verwendung des Lang -Attributs ist nicht einfach mit anderen Attributen in Konflikt zu stehen. Auf diese Weise können wir die Produkt -ID über $ (this). Eltern ("tr: First"). Attr ("Lang") erhalten.
Senden Sie anschließend AJAX -Anfragen und senden Sie sie mithilfe der Post -Methode. Die Post -Methode enthält vier Parameter:
Der erste Parameter ist die zugesandte Aktion
Der zweite Parameter ist der zu übergebene Parameter mit dem JSON -Format
Der dritte Parameter ist eine Funktion (Ergebnis), die zum Empfangen von Daten verwendet wird, die durch den Hintergrund gehen.
Die vierte Methode besteht darin, anzugeben, welche Art von Daten empfangen werden soll. JSON bedeutet, JSON -Daten zu empfangen, und Text bedeutet, Stream zu empfangen
Die aus dem Hintergrund zurückgegebene Gesamtsumme ist der Gesamtpreis aller Produkte. In der Funktion erhalten wir zunächst die Elemente aller Produkt -Subtotale auf der Basis der ID und weisen den Wert der Gesamtzahl zu. Totalall ist der Gesamtpreis, wenn die Fracht hinzugefügt wird. Die letzteren Tofixe (2) bedeuten, dass zwei Dezimalstellen erhalten bleiben. Holen Sie sich dann das Element eines einzelnen Produkts subtotal und berechnen Sie die Subtotale eines einzelnen Produkts. Auf diese Weise aktualisiert die Seite der Rezeption den Teil, den wir ohne Nachladen aktualisieren möchten. Das ist, was Ajax mächtig ist. Dies ist das gleiche wie das vorherige Easyui, das auch eine AJAX -Anfrage darstellt.
Okay, der AJAX -Teil wird hier vorgestellt. Das Folgende ist die Hintergrundverarbeitung der Anfrage, die gerade jetzt für mein eigenes Projekt ist und zum Aufzeichnen des Projektfortschritts verwendet wird.
3. Backend Update
Die gerade jetzt angeforderte Aktion von AJAX ist die Methode updatesorder () in SortEdAction. Daher gehen wir zur Sorderaction, um die Methode updatesorder () zu vervollständigen:
@Controller@scope ("prototyp") öffentliche Klasse Sorderaction erweitert Baseaction <Sorder> {public String addSorder () {// Irrelevante Code auslassen ... // Die Produktmenge nach der Produktnummer public String updatesorder () {Forder = (Forder) Sitzung ("Forder"); // Aktualisieren des Einkaufsartikels, das Produkt.ID übergeben in das Modell forder = sorderservice.UpdatesOrder (Modell, Forder); // Berechnen Sie den neuen Gesamtpreis -Forder. Session.put ("fderer", fderer); // den neuen Gesamtpreis in Form eines Stream InputStreams zurückgeben zurück "stream"; }}Die entsprechenden Methoden im Dienst werden wie folgt verbessert:
// SORDERService Interface Public Interface SORDERService erweitert BaseSeService <Sorder> {// Irrelevante Code speichern ... // Die Produktmenge gemäß Produkt -ID und Quantity Public Forder UpdatesOrder (Sorder Soorder, Forder -Fderer) -PuderImPiceImpicle -Class -SorderService -Effekt ("SorderService") öffentlich -klassifiziert. SORDERService {// irrelevante Code auslassen ... @Override public fderes updatesorder (Sorder Soorder, Forder Forder) {für (SORDER TEMP: FORDER.GetSorders () {if (temp.getProduct (). GetId (). Equals (Sorder.getProduct (). }} return fderer; }}Schließlich besteht die Konfiguration in der Datei struts.xml darin, "Stream" an <global-Result> wie folgt zuzuweisen
<global-results> <!-Andere öffentliche Konfigurationen speichern-> <resultenname = "stream" type = "stream"> <param name = "inputName"> inputStream </param> </result> </global-results>
Okay, jetzt kann der in der Aktion berechnete Gesamtpreis über die Form eines Streams an die Rezeption übertragen werden. Ajax kann in seiner Funktion empfangen, insgesamt platziert und an die Vorderseite angeschlossen werden.
Original -Link: http://blog.csdn.net/eson_15/article/details/51487323
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.