Я развернул проект и сыграл его. Сегодня я улучшил функцию изменения количества продуктов в корзине, чтобы частично обновить соответствующую общую цену. Все знают, что это должно быть реализовано с Ajax. Я не узнал Ajax раньше, и я просто случайно использовал эту небольшую функцию, чтобы просто узнать знание Ajax.
1. Анализ проблемы
Давайте посмотрим на ситуацию на странице:
Функция, как и выше. Прежде чем Ajax не будет доступен, вы обычно ищете действие на основе измененного значения пользователя, а затем возвращаетесь на новую страницу JSP, чтобы перезагрузить всю страницу, чтобы завершить обновление номеров. Но с помощью технологии AJAX мы можем использовать технологию AJAX, чтобы частично обновить изменения в том месте, которое мы хотим изменить, вместо перезарядки всей страницы. Во -первых, давайте посмотрим на код части JSP, соответствующей картинке выше:
<div> <!-корзина покупок-> <div id = "shophing_cart"> <viv> моя корзина для покупок </div> <Таблица CellPadding = "0" CellPacing = "0"> <Tr> <th> Номер продукта </th> <th Colspan = "2"> Название продукта </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 items = "$ {sessionscope.forder.sorders}" var = "sorder" varstatus = "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} </td> <td> <!-текстовое поле. value = "$ {sorder.number}" lang = "$ {sorder.number}"> </td> <td> $ {sorder.price*sorder.number} </td> <td> <a href = "#"> </a> </td> </tr> </c: for Preach> </tablet> <! 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> </td> <td> <td> <td> </td> <dr> <td> <td> </td> </tr> <td> <td> </td> </tr> <td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> <td style = ""> ￥ <span id = "yunfei"> 0,00 </span> </td> </tr> <tr> <td colspan = "1"> <strong> total </strong> </td> <td style = ""> ￥ <pan Id = "totalall"> <strong> $ {sessionscope.forder.total} <//"/span> <//span> <//span> <//span> <//span> <//span> <//span> <//span> <//span> <//span> <//span> <//$ </tbody> </table> <div> <font> <a href = "$ {shop}/confirm.jsp"> <button type = "button" style = "fanogy-color: #f38256;"> Подтверждение заказа </button> </a> </font> <font> <a href = " #"> </font "> </font> <font> <a href =" #" </button> </font> <a href = "$ {shop}/index.jsp"> <button type = "button"> <font> продолжить покупки </font> </button> </a> <div style = "clear: оба"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>Это похоже на много, но функция на самом деле очень проста. Он просто снимает соответствующие данные из домена, чтобы отобразить его. Если мы хотим реализовать функции, описанные выше, давайте сначала проанализируем идеи:
Во -первых, вы должны зарегистрировать событие: то есть событие, вызванное текстовым полем в номере, изменено;
В этом случае мы получаем номер ввода пользователем и судим законность ввода, потому что мы должны помешать пользователю входить случайным образом;
Если законно, отправьте данные на фону с помощью запроса Ajax;
Фон вызывает соответствующий метод бизнес -логики для получения новых результатов для нового номера и возвращает его на передний план через поток;
После того, как Ajax получает результат, он обновляет данные в соответствующем месте. Весь процесс закончился.
Если это незаконно, отображается число перед модификацией. Лечение не проводится
2. Реализация запросов AJAX
После анализа процесса мы начнем его реализовать. Сначала вставьте код детали JS здесь, а затем подробно анализируем его на основе вышеуказанного процесса:
<script type = "text/javascript"> $ (function () {// 1. Зарегистрировать событие $ (". Text"). изменение (function () {// 2. Проверьте обоснованность данных var = this. && number> 0) {// Если это законно, синхронно обновленное число $ (this) .attr ("lang", number); Идентификатор продукта и вернуть общую цену после модифицированного количества $ .post ("sorder_updatesordor.action", {number: number, 'product.id': pid}, function (total) {$ ("#total"). html (total); // subtotal из всех продуктов var yunfei = $ ("#uunfei"); // html (););); $ ("#totalall"). Html ((Total*1 + yunfei*1) .tofixed (2)); // Рассчитайте субтотальный отдельного продукта, сохраняя два десятичных значения, чтобы var price = ($ (this) .parent (). Prev (). Html ()*число) .tofixed (2); $ (this) .parent (). Next (). Html (цена); } else {// Если это незаконно, восстановите число, которое просто законно this.value = $ (this) .attr ("lang"); }})})}) </script>2.1 Регистрационные события
Мы видим, что регистрационное событие должно быть сначала расположено в этом текстовом поле. Здесь он расположен через селектор классов. Поскольку это текстовое поле, изменение () используется для регистрации события, а затем определить функцию function () для обработки события.
2.2 Определите законность данных
ОК, после регистрации события мы должны сначала вынести суждение о законности числа, введенного пользователем, поскольку пользователь может ввести 0 или отрицательные числа, может ввести десятичные десятички, или даже буквы или другие символы и т. Д. Поэтому требуется проверка. Isnan (номер) означает, что если число не является числом, он возвращает true. Мы можем использовать эту функцию, чтобы определить, является ли это числом; Parseint (номер) означает округление массива, а затем сравнивать его с собой. Мы ловко используем это, чтобы определить, является ли число целым числом.
2.3 Отправить запрос AJAX
Если данные являются законными, после того, как мы получим данные, мы можем отправить запрос Ajax на фону. Нам нужно рассмотреть вопрос: какие параметры нам нужно пройти? Прежде всего, если пользователь хочет обновить количество, нет никаких сомнений в том, что числа, введенные пользователем, должны быть переданы. Во -вторых, какой продукт должен передаваться? Другими словами, нам нужно получить идентификационный номер продукта, который пользователь хочет изменить. Узнав параметры, которые должны быть переданы, мы можем найти способ получить идентификационный номер.
Здесь есть вопрос. У пользователей может быть более одного продукта в своей корзине. Естественно, они будут думать, что было бы здорово, если бы они могли получить идентификатор разных продуктов с заявлением. Поэтому они подумали об использовании родительской теги текстового поля. Поскольку родительские теги разных продуктов одинаковы, они представляют собой первые теги <TR>, поэтому мы поместили идентификатор продукта в атрибут LANG в теге <Tr>, зачем его в атрибут LANG? Поскольку атрибут LANG в основном не используется, он используется для определения языков, и использование атрибута LANG нелегко конфликтовать с другими атрибутами ~ Таким образом, мы можем получить идентификатор продукта через $ (this) .parents («tr: First»). ATTR («Lang»);
Затем начните отправлять запросы AJAX, отправляя их с помощью метода POST. В методе Post есть четыре параметра:
Первый параметр - это действие, которое нужно отправить в
Второй параметр - это параметр, который должен быть передан, используя формат JSON
Третий параметр - это функция (результат), которая используется для получения данных, проходящих через фон.
Четвертый метод состоит в том, чтобы указать, какой тип данных будет получен. JSON означает получение данных JSON, а текст означает получение потока
Общая сумма возврата с фона - это общая цена всех продуктов, поэтому в этой функции сначала мы получаем элементы всех подтоллов продуктов на основе идентификатора и присваиваем значение общему. TotalAll - это общая цена с добавленной грузовой. Последние тофиксы (2) означает, что два десятичного места сохраняются. Затем получите элемент одного продукта подтотального и вычислите подтотал одного продукта. Таким образом, страница на стойке регистрации обновляет ту часть, которую мы хотим обновить без перезагрузки. Это то, что Ajax мощный. Это то же самое, что и предыдущий EasyUI, который также является запросом Ajax.
Хорошо, здесь представлена часть Ajax. Ниже приводится фоновая обработка запроса только сейчас, который предназначен для моего собственного проекта и используется для записи прогресса проекта.
3. Бэкэнд обновление
Действие, запрашиваемое Ajax только сейчас, является методом Updatesordordor () в сортировке, поэтому мы переходим к сордезации, чтобы завершить метод обновления ():
@Controller@Scope ("Prototype") Общедоступный сордезация класса Extens Baseaction <ordder> {public String addsorder () {// Опустить нерелевантный код ... // Обновление количества продуктов в соответствии с номером продукта public string updatesordord () {forder forder = (forder) session.get ("forder"); // Обновление предмета покупки, продукт. ID передается инкапсулируется в модель forder = sorderservice.updatesorder (Model, Forder); // Рассчитайте новую общую цену Forder.SetTotal (ForderService.clutotal (Forder)); session.put ("forder", forder); // возвращать новую общую цену в форме потока inputStream = new BytearRayinptStream (forder.getTotal (). ToString (). GetBytes ()); вернуть "поток"; }}Соответствующие методы в службе улучшаются следующим образом:
//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> реализует Sorderservice {// Опустить нерелевантный код ... @Override Public Forder UpdatesOrder (Sorder Soorder, Forder Forder) {for (Sorder Temp: forder.getSorders ()) {if (temp.getProduct (). getId (). equals (sorder.getProduct (). getId ()) {temp.Set (). }} вернуть Forder; }}Наконец, конфигурация в файле struts.xml заключается в назначении «потока» на <global-result>, следующим образом
<slobal-results> <!-Сохранить другие публичные конфигурации-> <result name = "stream" type = "stream"> <param name = "input-amame"> inputstream </param> </result> </global-results>
Хорошо, теперь общая цена, рассчитанная в действии, может быть передана на стойку регистрации через форму потока, AJAX может быть получен в его функции, размещен в общей сложности и подключен к фронту.
Оригинальная ссылка: http://blog.csdn.net/eson_15/article/details/51487323
Вышеуказанное - все содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.