Eu implantei o projeto e o toquei. Hoje, melhorei a função de modificar a quantidade de produtos no carrinho de compras para atualizar parcialmente o preço total correspondente. Todo mundo sabe que isso deve ser implementado com o Ajax. Eu não aprendi o Ajax antes e, por acaso, usei essa pequena função para simplesmente aprender o conhecimento do Ajax.
1. Análise do problema
Vamos dar uma olhada na situação na página:
A função é como acima. Antes que o AJAX não esteja disponível, você geralmente procura ação com base no valor modificado do usuário e retorna à nova página JSP para recarregar a página inteira para concluir a atualização dos números. Mas com a tecnologia Ajax, podemos usar a tecnologia AJAX para atualizar parcialmente as alterações no local que queremos mudar, em vez de recarregar a página inteira. Primeiro, vamos dar uma olhada no código da parte JSP correspondente à foto acima:
<div> <!-carrinho de compras-> <div id = "shopping_cart"> <div> meu carrinho de compras </div> <tabela celularpadding = "0" CellPacing = "0"> <tr> <th> Número do produto </th> <th colsan = "2"> nome do produto </</<th> </tr> <c: foreach itens = "$ {sessionscope.forder.sorders}" var = "Sorder" varstatus = "num"> <tr lang = "$ {Sorder.product.id}"> <td> <a href = "#"> $ {num.count} </a> src = "$ {shop}/files/$ {Sorder.product.pic}"/> </td> <td> <a href = "#"> $ {Sorder.name} </a> </td> <td> $ {Sorder.price} </td> <! value = "$ {Sorder.number}" Lang = "$ {Sorder.number}"> </td> <td> $ {Sorder.price*Sorder.number} </td> <td> <a href = "#"> </a> </td> </td> </c: paraEGH> id = "totais-table"> <tbody> <tr> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = ""> <strong> ￥ <span id = "total"> $ {sessioScope.forder.total} </span> </strack> </td> </td> </td> </td> </td> </td> colspan = "1"> frete </td> <td style = ""> ￥ <span id = "yunfei"> 0,00 </span> </td> </tr> <tr> <td colspan = "1"> <strong> total </strong> </td> <td style = " id = "Totalall"> <strong> $ {sessionscope.forder.total} </strong> </span> </td> </tr> </tbody> </itlay> <div> <font> <a href = "$ {shop} /user/confirm.jsp"> <butt = "button; Confirmação </botão> </a> </font> <font> <a href = "#"> <button type = "button"> <font> Limpe o carrinho </font> </tobtle> </font> <a href = "$ {shop} /index.jsp"> <butão) Style = "Limpar: Ambos"> </div> </div> </div> </div> </div> </div> </div> </div>Parece muito, mas a função é realmente muito simples. Ele apenas retira os dados correspondentes do domínio para exibi -los. Se queremos implementar as funções descritas acima, vamos analisar as idéias primeiro:
Primeiro, você deve registrar um evento: ou seja, o evento acionado pela caixa de texto no número é modificado;
Nesse caso, obtemos a entrada número do usuário e julgamos a legalidade da entrada, porque devemos impedir que o usuário digite aleatoriamente;
Se legal, envie dados para o histórico via solicitação AJAX;
O plano de fundo chama o método lógico de negócios correspondente para obter novos resultados para um novo número e o retorna ao primeiro plano através do fluxo;
Depois que o Ajax recebe o resultado, ele atualiza os dados no local correspondente. Todo o processo acabou.
Se for ilegal, o número antes da modificação é exibido. Nenhum tratamento é feito
2. Implementação de solicitações de Ajax
Depois de analisar o processo, começaremos a implementá -lo. Primeiro, cole o código da parte do JS aqui e depois o analisamos em detalhes com base no processo acima:
<script type = "text/javascript"> $ (function () {// 1. Evento de registro $ (". text"). altere (function () {// 2. Verifique a validade dos dados var número = this.value; // você também pode usar $ (this) .val (); // isto é (número) (número) (número de número) (número) e não é necessário (número! Número> 0) {// Se for legal, o número de síncrona atualizado $ (this) .attr ("Lang", número); do produto e retorne o preço total após a quantidade modificada $ .post ("Sorder_UpDatesOrder.action", {número: número, 'product.id': pid}, function (total) {$ ("#total"). $ ("#totalall"). HTML ((total*1 + yunfei*1) .Tofixed (2)); // Calcule o subtotal de um único produto, mantendo dois lugares decimais var preços = ($ (this) .parent (). Prev (). Html ()*número) .tofixado (2); $ (this) .Parent (). Next (). html (preço); } else {// Se for ilegal, restaure o número que apenas legal this.value = $ (this) .attr ("lang"); }})})}) </script>2.1 Evento de registro
Podemos ver que o evento de registro deve primeiro ser posicionado nesta caixa de texto. Aqui está posicionado através do seletor de classe. Por ser uma caixa de texto, altere () é usado para registrar o evento e, em seguida, definir uma função () função nela para lidar com o evento.
2.2 julgar a legalidade dos dados
OK, depois de registrar o evento, devemos primeiro julgar a legalidade do número inserido pelo usuário, porque o usuário pode inserir 0 ou números negativos, pode entrar decimais, ou mesmo letras ou outros caracteres, etc. Portanto, é necessária a verificação. Isnan (número) significa que, se o número não for um número, ele retorna true. Podemos usar essa função para determinar se é um número; Parseint (número) significa arredondar a matriz e depois compará -la com si mesmo. Usamos inteligentemente isso para determinar se o número é um número inteiro.
2.3 Envie o pedido de Ajax
Se os dados forem legais, depois de obtermos os dados, podemos enviar uma solicitação AJAX para o segundo plano. Precisamos considerar uma pergunta: quais parâmetros precisamos passar? Antes de tudo, se o usuário quiser atualizar a quantidade, não há dúvida de que os números inseridos pelo usuário devem ser transmitidos. Em segundo lugar, qual produto deve ser transmitido? Em outras palavras, precisamos obter o número de identificação do produto que o usuário deseja modificar. Depois de conhecer os parâmetros a serem transmitidos, podemos encontrar uma maneira de obter o número de identificação.
Há uma pergunta aqui. Os usuários podem ter mais de um produto em seu carrinho de compras. Naturalmente, eles pensarão que seria ótimo se pudessem obter o ID de produtos diferentes com uma declaração. Portanto, eles pensaram em usar a etiqueta pai da caixa de texto. Como as etiquetas pais de diferentes produtos são iguais, elas são as primeiras tags <tr>, então colocamos o ID do produto no atributo lang na tag <tr>, por que colocá -lo no atributo lang? Como o atributo lang não é basicamente usado, ele é usado para definir idiomas e, usando o atributo Lang, não é fácil de conflitar com outros atributos ~ dessa maneira, podemos obter o ID do produto através de $ (this) .Parents ("tr: primeiro"). Att ("Lang");
Em seguida, comece a enviar solicitações do AJAX, enviando -as usando o método post. Existem quatro parâmetros no método do post:
O primeiro parâmetro é a ação a ser enviada para
O segundo parâmetro é o parâmetro a ser aprovado, usando o formato JSON
O terceiro parâmetro é uma função (resultado), usada para receber dados que passam pelo plano de fundo.
O quarto método é especificar que tipo de dados a ser recebido. JSON significa receber dados JSON e texto significa receber fluxo
O total retornado do plano de fundo é o preço total de todos os produtos; portanto, na função, primeiro obtemos os elementos de todos os subtotais de produtos com base no ID e atribuem o valor ao total. Totalall é o preço total com o frete adicionado. Os últimos tofixos (2) significam retenção de dois lugares decimais. Em seguida, obtenha o elemento de um subtotal de um único produto e calcule o subtotal de um único produto. Dessa forma, a página da recepção atualiza a parte que queremos atualizar sem recarregar. Esta é a parte poderosa do Ajax. É o mesmo que o Easyui anterior, que também é uma solicitação de Ajax.
Ok, a parte do Ajax é introduzida aqui. A seguir, é apresentado o processamento em segundo plano da solicitação agora, que é para o meu próprio projeto e é usado para registrar o progresso do projeto.
3. Atualização de back -end
A ação solicitada pelo AJAX agora é o método UpdateSorder () no STORNEDACION, por isso vamos ao SorderAction para concluir o método UpdateSorder ():
@Controlador@scope ("prototype") classe pública SorderAction estende o BaseAction <sorder> {public string addSorder () {// omita código irrelevante ... // Atualize a quantidade de produtos de acordo com o número do produto public string updateSorder () {forder forder = (forder) session.get ("forder"); // Atualize o item de compras, o produto. Passado é encapsulado no modelo forder = sorderService.UpDatesOrder (Model, Forder); // Calcule o novo preço total forder.setTotal (ForderService.clutotal (Foreder)); session.put ("FORDER", FORDER); // Retorna o novo preço total na forma de um fluxo inputStream = novo byteArrayInputStream (forder.gettotal (). ToString (). GetBytes ()); retornar "stream"; }}Os métodos correspondentes no serviço são aprimorados da seguinte forma:
//SorderService interface public interface SorderService extends BaseService<Sorder> { //Save irrelevant code... //Update product quantity according to product id and quantity public Forder updateSorder(Sorder soorder, Forder forder);}//SorderServiceImpl implementation class @Service("sorderService")public class SorderServiceImpl extends BaseServiceImpl<Sorder> implementa SorderService {// omitisse o código irrelevante ... @Override Public FORDORDATESSODER (Sorder SoOrder, Forder Forder) {for (Sorter Temp: forder.getSorders ()) {if (temp.getproduct (). getId (). }} retorna forder; }}Finalmente, a configuração no arquivo struts.xml é atribuir "stream" a <lobal-Result>, como segue
<Blobal-Results> <!-Salvar outras configurações públicas-> <resultado name = "stream" type = "stream"> <param name = "inputName"> inputStream </amul> </siclows> </lobal-results>
Ok, agora o preço total calculado na ação pode ser transmitido à recepção através da forma de um fluxo, o AJAX pode ser recebido em sua função, colocado no total e conectado à frente.
Link original: http://blog.csdn.net/eson_15/article/details/51487323
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.