Как я писал это раньше, когда я завершил эту демонстрацию, я обнаружил, что теперь все больше не используют Ajax для завершения совместного меню. На самом деле, демо -версия автора не для завершения этого. Основным направлением обучения автора является разработка бизнес -логики фона Javaweb. Однако, работая на заднем плане, вам все еще нужно иметь некоторое понимание фронт-конца, особенно технологии асинхронного представления данных, таких как Ajax, необходимо понимать и освоить. Итак, здесь я использую объединенное меню для практики асинхронного подчинения Ajax, а затем напишу несколько демонстраций асинхронной формы подчинения.
Фон автора использует структуру Spring+Springmvc. Эта часть не объяснена здесь, основное внимание уделяется jQuery и Ajax.
Сначала скачать ресурс jQuery.js
Ссылка на официальное веб -сайт jQuery
Во -вторых, импортировать загруженную jQuery.js в проект
В проекте Javaweb просто поместите его в веб-контент (вы также можете создать свою собственную папку, но не помещайте ее в файл Web-Inf)
В -третьих, начать писать код
Создать новый файл JSP
Код выглядит следующим образом
<%@page import = "java.util.map"%> <%@page import = "java.util.list"%> <%@page language = "java" contentType = "text/html; charset = utf-8" pageencoding = "utf-8"%> <! Doctpe html public "-// w3c/dtd ht ht htm.01. Transitional // en "" http://www.w3.org/tr/html4/loose.dtd"><html><head> http-equiv = "content-type" content = "text/html; перешел на передний конец с фона. Он может быть отделен от темы Ajax, и нет необходимости уделять слишком много внимания-> <%list <map <string >> listmap = (list <map <string, object >> request.getattribute ("list"); %> <select id = "class" onchange = "getStudent (this.value)"> <vition value = "-1"> Пожалуйста, выберите Class </option> <%для (int i = 0; i <listmap.size (); i ++) {map <string> map = listmap.get (i);%> <anture> <%= map.get ("class"). %> </option> < %} %> <!-сначала выберите класс, а затем второй параметр меню синхронизирует данные фоновой базы данных асинхронно в соответствии с выбранным контентом, таким образом настройка параметров второго меню-> </select> <!-Второе меню, определить имя в соответствии с выбранным классом-> <select Id = "> <plaice> Please> Select Select Class First </Option> Option> Option> optain> <//jable-name '> <plaint> Пожалуйста, выберите« Сначала <//option »>« Опция »> <//name namer> <plaic> Пожалуйста, выберите« Опция »> <//<//name'> <plaint> wortion>. Ресурсы-> <script type = "text/javascript" src = "jquery/jquery-3.1.1.min.js"> </script> <!-Используйте ajax в jQuery для выполнения асинхронной синхронизации интерфейса-> <croppt> // jQuery Стандартный синтаксис $. Выбрана этими изменениями управления, эта функция $ ("#class"). Change (function () {// Call ajax $ .ajax in jQuery ({// Установить метод отправки, в основном «Get» и «post» тип: «p ost», // Установить представленный URL, вы можете выбрать только локальные. Если вам нужно вызовать ресурсы из других доменов, пожалуйста, Google, чтобы решить URL-адрес проблемы по перекрестной области: "ajax.html? Classname ="+$ ("#class"). Val (), // Установите формат возврата фона, обычно используйте JSON напрямую. Это предложение нельзя пропустить. В противном случае, когда фон возвращает данные, метод успеха не будет называться DataType: «json», // Когда фон успешно возвращает данные, метод вызывается. Параметр данных представляет данные JSON, отформатированные Ajax в jQuery (на самом деле, нам нужно отформатировать их вручную в не JQUERY AJAX, и я также написал метод Pure JS в комментариях. Метод форматирования данных JSON в JQUERY-это PARSE) Успех: // // Очистить элемент управления идентификатором $ (###). Вариант $ ("#name"). Append ("<plaint> Пожалуйста, выберите имя </option>"); // rup через все данные (JSON Data) и добавьте опцию $. <Oppion> "+data [i] .name+" </option> ");});});});});});}); </script> <!-Метод отправки не использует библиотеку jQuery (это используется чистый код JS, он используется Rely, но он не может быть использован для понимания ajax) <script> <! Добавьте обмен в элемент управления SELECT, чтобы вызвать этот метод, а затем выбранное значение будет автоматически храниться в этой функции переменной классной имени GetStudent (className) {if (className! Параметры с использованием метода Open. Последнее истинное означает, что вы используете асинхронное подчинение, которое может быть опущено. Значение по умолчанию - truerequest.open ("post", "ajax.html? Classname ="+classname, true); // Отправить ajax request.send (); // Отправить запрос ajax request.send (); // Статус запроса в основном 0 1 2 3 4, но с одной стороны он будет только прослушивать 2 3 4, если 4 4. function () {// Судья, что следующий шаг будет выполнен только если (request.readstate === 4) {// Судья, что код возврата веб -страницы составляет 200, когда в порядке, перейдите к следующему шагу if (request.status === 200) {// Форматирование возвращаемых данных json data = json.parse (request.responsetextext); document.getElementById ("name"). Length;В -четвертых, окончательная диаграмма эффекта
Выше выше - это разработка Javaweb, которую редактор представил вам. Использование JQUERY и AJAX для достижения эффектов меню динамической связи. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!