He desplegado el proyecto y lo he jugado. Hoy he mejorado la función de modificar la cantidad de productos en el carrito de compras para actualizar parcialmente el precio total correspondiente. Todos saben que esto debe implementarse con AJAX. No he aprendido Ajax antes, y simplemente usé esta pequeña función para simplemente aprender conocimiento de Ajax.
1. Análisis del problema
Echemos un vistazo a la situación en la página:
La función es como arriba. Antes de que AJAX no esté disponible, generalmente busca una acción basada en el valor modificado del usuario, y luego regrese a la nueva página JSP para recargar la página completa para completar la actualización de los números. Pero con la tecnología Ajax, podemos usar la tecnología Ajax para refrescar parcialmente los cambios en el lugar que queremos cambiar, en lugar de recargar toda la página. Primero, echemos un vistazo al código de la parte JSP correspondiente a la imagen de arriba:
<Viv> <!-Cart de compras-> <div ID = "shopping_cart"> <div> mi carrito de compras </div> <table cellPadding = "0" cellpacing = "0"> <tr> <th> número de producto </th> <th colsspan = "2"> nombre de producto </th> <th> precio de venta </th> <th> cantidad </th> <th> subtotal </th> <th> <th> <th> <th> <th> <th> <th <th <th <th <th <th <th> <th> <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th <th </tr> <c: foreach elementos = "$ {sessionscope.forder.sorders}" var = "Sorder" varstatus = "num"> <tr lang = "$ {Sorder.product.id}"> <td> <a href = "#"> $ {num.Count} </a> </td> <td> <igg> src = "$ {shop}/files/$ {Sorder.product.pic}"/> </td> <td> <a href = "#"> $ {Sorder.name} </a> </td> <td> $ {Sorder.Price} </td> <td> <! valor = "$ {Sorder.Number}" lang = "$ {Sorder.Number}"> </td> <TD> $ {Sorder.Price*Sorder.Number} </td> <TD> <a href = "#"> </a> </aTD> 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 <td colspan = "1"> Freight </td> <td style = ""> ￥ <span id = "yunfei"> 0.00 </span> </td> </tr> <tr> <tr> <td colspan = "1"> <strong> total </strong> </td> <td style = ">" <span <sp span id = "totalall"> <strong> $ {sessionScope.forder.total} </strong> </span> </td> </tr> </tbody> </toptril> <div> <font> <a href = "$ {shop} /user/confirm.jsp"> <button type = "boots" style = "Color de fondo: #f38256;" Confirmación </botton> </a> </font> <font> <a href = "#"> <botón type = "botón"> <font> borrar el carrito </font> </boton> </font> <a href = "$ {shop} /index.jsp"> <button type = "button"> <font> Continuar compriendo </font> </aha> </ai> Button </button> style = "Clear: Ambos"> </div> </div> </div> </div> </div> </div> </div> </div>Parece mucho, pero la función es en realidad muy simple. Solo saca los datos correspondientes del dominio para mostrarlo. Si queremos implementar las funciones descritas anteriormente, analicemos primero las ideas:
Primero, debe registrar un evento: es decir, el evento activado por el cuadro de texto en el número se modifica;
En este caso, obtenemos la entrada de números por parte del usuario y juzgamos la legalidad de la entrada, porque debemos evitar que el usuario ingrese al azar;
Si está legal, envíe datos a los antecedentes a través de la solicitud AJAX;
El fondo llama al método de lógica comercial correspondiente para obtener nuevos resultados para un nuevo número y lo devuelve al primer plano a través del flujo;
Después de que AJAX recibe el resultado, actualiza los datos en la ubicación correspondiente. Todo el proceso ha terminado.
Si es ilegal, se muestra el número antes de la modificación. No se realiza ningún tratamiento
2. Implementación de solicitudes de AJAX
Después de analizar el proceso, comenzaremos a implementarlo. Primero, pegue el código de la parte JS aquí, y luego lo analizamos en detalle en función del proceso anterior:
<script type = "text/javaScript"> $ (function () {// 1. registrar evento $ (". Text"). Change (function () {// 2. Verifique la validez del número de datos var de los datos = this.value; // también puede usar $ (this) .val (); // isnan (número) que significa que el número no es un número, devuelve si es verdadero (número (número (número (número (número) && número> 0) {// Si es legal, Número actualizado sincrónicamente $ (this) .attr ("lang", número); ID del producto, y devuelva el precio total después de la cantidad modificada $ .post ("Sorder_updatesorder.action", {número: número, 'Product.id': Pid}, function (total) {$ ("#total"). Html (total); // Subtotal de todos los productos var yunfei = $ ("#yunfei"). Html ();; $ ("#Totalall"). Html ((Total*1 + Yunfei*1) .tofixed (2)); // Calcule el subtotal de un solo producto, reteniendo dos lugares decimales VAR Price = ($ (this) .Parent (). Prev (). Html ()*Número) .tofixed (2); $ (this) .parent (). next (). html (precio); } else {// Si es ilegal, restaurar el número que solo legaliza esto.value = $ (this) .attr ("lang"); }})})}) </script>2.1 Eventos de registro
Podemos ver que el evento de registro primero debe colocarse en este cuadro de texto. Aquí se coloca a través del selector de clases. Debido a que es un cuadro de texto, Change () se usa para registrar el evento y luego definir una función de función () en él para manejar el evento.
2.2 Determinar la legalidad de los datos
Ok, después de registrar el evento, primero debemos juzgar la legalidad del número ingresado por el usuario, porque el usuario puede ingresar 0 o números negativos, puede ingresar decimales, o incluso letras u otros caracteres, etc. Por lo tanto, se requiere verificación. ISNAN (número) significa que si el número no es un número, devuelve verdadero. Podemos usar esta función para determinar si es un número; Parseint (número) significa redondear la matriz y luego compararla consigo misma. Usamos inteligentemente esto para determinar si el número es un entero.
2.3 Enviar solicitud AJAX
Si los datos son legales, después de obtener los datos, podemos enviar una solicitud AJAX a los antecedentes. Necesitamos considerar una pregunta: ¿Qué parámetros debemos aprobar? En primer lugar, si el usuario desea actualizar la cantidad, no hay duda de que los números ingresados por el usuario deben transmitirse. En segundo lugar, ¿qué producto debe transmitirse? En otras palabras, necesitamos obtener el número de identificación del producto que el usuario desea modificar. Después de conocer los parámetros que se transmitirán, podemos encontrar una manera de obtener el número de identificación.
Hay una pregunta aquí. Los usuarios pueden tener más de un producto en su carrito de compras. Naturalmente, pensarán que sería genial si puedan obtener la identificación de diferentes productos con una declaración. Por lo tanto, pensaron en usar la etiqueta principal del cuadro de texto. Debido a que las etiquetas principales de diferentes productos son las mismas, son las primeras etiquetas <tr>, por lo que colocamos la ID del producto en el atributo Lang en la etiqueta <tr>, ¿por qué ponerlo en el atributo Lang? Debido a que el atributo Lang básicamente no se usa, se usa para definir idiomas, y usar el atributo Lang no es fácil de conflicto con otros atributos ~ de esta manera, podemos obtener la identificación del producto a través de $ (this) .Parents ("tr: primero"). Attr ("lang");
A continuación, comience a enviar solicitudes de AJAX, enviándolas usando el método de publicación. Hay cuatro parámetros en el método de publicación:
El primer parámetro es la acción que se enviará a
El segundo parámetro es el parámetro a pasar, utilizando el formato JSON
El tercer parámetro es una función (resultado), que se utiliza para recibir datos que pasan a través del fondo.
El cuarto método es especificar qué tipo de datos se recibirán. JSON significa recibir datos de JSON, y texto significa recibir transmisión
El total regresado del fondo es el precio total de todos los productos, por lo que en la función, primero obtenemos los elementos de todos los subtotales de productos basados en la ID y asignamos el valor al total. Totalall es el precio total con el flete agregado. El último tofixes (2) significa que se conservan dos decimales. Luego obtenga el elemento de un solo producto subtotal y calcule el subtotal de un solo producto. De esta manera, la página de recepción actualiza la parte que queremos actualizar sin recargar. Esto es lo que Ajax es poderoso. Esto es lo mismo que el Easyui anterior, que también es una solicitud AJAX.
De acuerdo, la parte de Ajax se introduce aquí. El siguiente es el procesamiento de antecedentes de la solicitud en este momento, que es para mi propio proyecto y se utiliza para registrar el progreso del proyecto.
3. Actualización de backend
La acción solicitada por AJAX hace ahora es el método UpdateSOrder () en Sortedaction, por lo que vamos a SorderAction para completar el método UpdateSOrder ():
@Controlador@scope ("prototype") public class SorDeraction extiende Baseaction <Sorder> {public String addSOrder () {// omitir código irrelevante ... // Actualizar la cantidad de productos de acuerdo con el número de producto Public String UpdateAdeser () {Fosder Fosder = (Forder) Session.get ("Forder"); // Actualizar el elemento de compra, el Product.id pasado está encapsulado en el modelo Forder = Sorderservice.UpdatesOrder (modelo, Forra); // Calcule el nuevo precio total portero. session.put ("Forra", Forra); // devuelve el nuevo precio total en forma de un flujo inputStream = new ByteArrayInputStream (Forder.GetTotal (). ToString (). GetBytes ()); devolver "transmisión"; }}Los métodos correspondientes en el servicio se mejoran de la siguiente manera:
// Interfaz de Sorderservice Interface Public Interface SorderService extiende BaseService <Sorder> {// Guardar código irrelevante ... // Actualizar la cantidad de producto de acuerdo con la identificación del producto y la cantidad de la cantidad pública de actualizaciones de Forder (Sorder Soorder, Fosder Fosder);} // SorderserviceMplemation Class @Service ("SorderService") Public Class SfirecterseService Extendes Extendes Extendes Extendes Extendes Extendes Extendes Extendes Extends. implementa sorderservice {// omitir código irrelevante ... @Override public Forder UpdateSoRorder (Sorder Soorder, Forder Forder) {for (SORDER TEMP: FORDER.GETSORDERS ()) {if (temp.getProduct (). }} return fazer; }}Finalmente, la configuración en el archivo struts.xml es asignar "transmisión" a <global-result>, de la siguiente manera
<Global -results> <!-Guardar otras configuraciones públicas-> <resultado name = "stream" type = "stream"> <param name = "inputName"> inputStream </param> </resultado> </global-resultos>
De acuerdo, ahora el precio total calculado en la acción se puede transmitir a la recepción a través de una transmisión, AJAX se puede recibir en su función, colocado en total y conectado al frente.
Enlace original: http://blog.csdn.net/eson_15/article/details/51487323
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.