Перезагрузите страницу, не отправляя ее обратно на сервер

Question

Проблема в том, что у меня есть два набора значений в выпадающем списке. Если выбран тип «A», я хочу, чтобы текстовое поле заполнялось значением из базы данных и было доступно только для чтения. Если выбран тип «B», поле должно быть пустым и редактируемым.

Мой оригинальный код написан в jsp / struts, и я вроде как достиг этого, используя

onchange="javascript:submit()", чтобы перезагрузить страницу, но это имеет очевидный недостаток сохранения любых внесенных вами изменений, что означает, что вы не можете действительно отменить.

У меня также есть другие проблемы с проверкой на стороне сервера из-за этого метода.

Есть ли способ перезагрузить страницу jsp при изменении, чтобы я мог написать javascript, чтобы изменить внешний вид страницы в соответствии со значениями, хранящимися в сеансе. Таким образом, функция сохранения / отправки будет вызываться только тогда, когда страница заполнена должным образом и проверка на стороне сервера будет работать в соответствии с планом.

Я знаю, что это хорошо для AJAX, но я стараюсь избегать этого, если это возможно.

Answer 1

AJAX - ваш единственный вариант, мой друг, если только на исходной странице загрузки вы не загрузите все другие возможные значения текстового поля, поэтому вам не нужно возвращаться в базу данных. Что ж, вы можете попробовать поместить текстовое поле в IFRAME, но вы, вероятно, столкнетесь с большим количеством проблем с этим подходом, чем просто с AJAX.

Answer 2

По словам Стриндога, но если вам нужны динамические данные:

Не могли бы вы написать бэкэнд JS на страницу, а затем JS изменил бы форму по мере необходимости? Бэкэнд может распространять некоторые переменные для описаний и тому подобное, а затем JS может соответственно изменить / обновить форму. Если вы не знакомы с этим, библиотеки вроде jQuery делают такие вещи проще и кроссбраузернее, чем собственные (по крайней мере, по моему опыту).

Кроме: Если вы не используете AJAX, потому что его было трудно кодировать (как я не делал некоторое время, потому что мой первый опыт был с нуля и не был красивым), как говорили другие, libs вроде MooTools и теперь это действительно легко. Также нет ничего постыдного в том, чтобы правильно использовать AJAX. У него плохой рэп, потому что люди делают с ним глупые вещи, но если вы не можете просто записать предварительно подготовленные значения в форму или вам приходится искать вживую, то это одно из правильных применений AJAX.

Answer 3

Если я правильно вас понимаю, что вы хотите раскрывающийся список (<select>) или текстовое поле (<input type="text">) в зависимости от выбора (обычно флажок или радиокнопки) где-то выше в форме?

В этом случае вам может понадобиться по-разному обрабатывать два типа ввода на сервере, так почему бы не иметь и поле выбора, и текстовое поле в области формы с разными именами и идентификатором, а один из них скрыт (display = none). Затем переключите видимость, когда выбор изменится. На сервере, который вы выбираете eiter, ввод selectbox или textarea (который будет присутствовать, если вы тоже не отключите (disabled="disabled") их, что я считаю ненужным), в зависимости от ввода выбора.

Конечно, если вы ожидаете, что пользователь обычно просто нуждается в вводе текста, и только несколько раз, в огромном списке; было бы лучше использовать ajax для получения списка. Но если все наоборот (текстовое поле нужно только от случая к случаю), как я предполагал выше, будет быстрее, чтобы оба присутствовали в исходной форме.

Если раскрывающийся список содержит только легко генерируемые данные, например, годы от года до гончих лет назад, это может быть даже намного быстрее (требуя меньшей пропускной способности на сервере) для генерации стороны клиента данных с использованием цикла for в Javascript.

Answer 4

Я знаю taglib, который может соответствовать вашей проблеме: AjaxTags . Я использую этот taglib в своих проектах J2EE, и его очень просто интегрировать в веб-приложения.

Этот taglib предоставляет вам несколько тегов, предназначенных для выполнения запроса AJAX в ваших файлах jsp.

Вот описание каждого тега: http://ajaxtags.sourceforge.net/usage.html

Тег, который поможет вам, является тегом ajax: select. Это позволяет вам заполнить тег выбора, который зависит от другого поля, без перезагрузки всей страницы JSP.

Если вам больше информации об этом, спросите меня, и я постараюсь ответить быстро.

Answer 5

Одним из способов является изменение действия формы, чтобы вы отправляли форму с другим URL-адресом, чем URL-адрес «сохранить». Это позволяет вам перезагружать определенные аспекты формы и возвращаться к самой форме вместо фиксации данных.

<script>
  function reload() {
    document.forms[0].action="reloadFormData.jsp";
    document.forms[0].submit();
  }
</script>
<form action="saveData.jsp" method="post">
  <select id="A" name="B" onchange="reload()"><!-- blah --></select>
  <select id="B" name="B"><!-- blah B --></select>
  <input type="submit">
</form>

Answer 6

Не знаю, почему вы пытаетесь избежать AJAX в современном мире, библиотеки JS сегодня делают его настолько простым, что безумие не попробовать.

Мне просто нужно было заменить страницу, написанную, как указал Винсент. Я предполагаю, что в то время это имело смысл для приложения, учитывая относительный размер данных 4 года назад. Теперь, когда приложение масштабировалось, странице потребовалось более 30 секунд для многократного анализа структур данных (плохо написано JS? Может быть).

Я заменил всю логику очень простым AJAX-вызовом сервлета, который просто возвращает JSON-ответ значений для 2-го выпадающего списка на основе того, что было ему передано, и ответ в основном мгновенный.

Удачи тебе.

Answer 7

Без AJAX то, что вы просите, будет трудным. Другой вариант (который уродлив) - записать все возможные значения для второго списка в структуру данных, такую ​​как массив или словарь.

Затем напишите некоторый javascript, чтобы получить значения из структуры данных, когда пользователь выбирает из первого списка. Количество javascript, которое вам нужно будет написать, чтобы сделать это и сделать это правильно в кросс-браузерном режиме, будет намного сложнее, чем просто использование AJAX.