Зачем использовать тег формы при отправке через ajax?

философский вопрос:

У меня есть веб-приложение, которое требует javascript и современный браузер, поэтому прогрессивное улучшение не является проблемой. Если моя форма строится через javascript, и все мои обновления данных выполняются через ajax POSTs & PUTs, есть ли какая-либо причина обернуть мои элементы управления в тег формы? Если я все еще собираюсь использовать тег, скажем, по семантическим или структурным причинам, есть ли причина иметь параметры действия и метода, которые я собираюсь игнорировать? Мне кажется, что это пережиток прошлого.

71
ajax forms html javascript

7 ответов

существует по крайней мере одна важная функция пользовательского опыта, предоставляемая специально путем обертывания входов внутри тега формы:

клавиша enter отправит форму. в самом деле, в мобильном сафари, это, как вы получите "перейти"чтобы появиться на клавиатуре.

без формы, обертывающей входные данные, нечего отправлять.

вы можете, конечно, обеспечить поведение enter-key через событие нажатия клавиши, но я не знаю, работает ли это для мобильных устройств. Я не знаю о вас, но я бы предпочел работать с семантикой, предоставленной браузером, чем имитировать их с событиями.

в вашем случае вы просто предоставите onsubmit обработчик событий для формы, которая будет делать ваш AJAX submit, затем return false, отмена фактического отправки.

вы можете просто предоставить action="" (что означает "я"), и method не требуется - по умолчанию это GET.

65

Если вам не нужно прогрессивное повышение, то вы теоретически не нужны они.

С другой стороны, forms есть прохладный группировка и смысловое эффекты. Используя их, вы можете группируйте элементы формы логически, и сделать его более легким для ваших сценариев, чтобы собрать значения определенных элементов.

например, если вы хотите ajax-отправить некоторый пользовательский ввод, всегда проще сказать: "давайте возьмем все элементы в этой форме и отправим их", чем сказать: "давайте возьмем этот вход, этих двух выбирает и этих трех переключателей и представить их". По моему опыту, это действительно помогает разработчику, если form теги присутствуют.

15

AJAX велик, но, как сказал JamWaffles (+1 к нему), используя form теги обеспечивает резервный метод.

лично я использую теги формы, даже для вещей, которые я отправляю с AJAX, потому что это синтаксически ясно и позволяет легко захватить все входы в определенной форме. Да, вы можете сделать это с помощью div или что-то еще, но, как я уже сказал, использование формы синтаксически приятно.

кстати, читатели экрана обрабатывают содержимое внутри form по-разному, поэтому есть вопросы доступности должны рассматриваться в зависимости от того, какой путь вы выберете. Обратите внимание, что анекдотические данные говорят о том, что Google рассматривает доступность в своих рейтингах, поэтому, если SEO беспокоит вас, используйте форму и делайте это правильно.

11

резюме: формы ОК для MVC веб-приложения, плохо ориентированных компонентов, богатых веб-приложений.

причина: формы не могут вложить другие формы: большое ограничение для архитектуры, ориентированной на компоненты.

подробности: Для типичных приложений MVC формы великолепны. В богатых, сложных веб-приложениях, использующих много javascript и AJAX и с большим количеством компонентов здесь и там, мне не нравятся формы. Причина: формы не могут гнездиться в других формах. Затем, если каждый компонент отображает форма, компоненты не могут вложить друг друга. Очень плохо. Изменяя все формы на divs, я могу вложить их, и всякий раз, когда я хочу захватить все параметры, чтобы передать их ajax, я просто делаю (с jQuery):

$("#id_of_my_div").найти("[имя]").serialize ();

(или какая-то другая фильтрация)

вместо:

$("#id_of_my_form").serialize ();

хотя, по сентиментальным и семантическим причинам, я продолжаю называть свои divs something_form, когда они действуя как формы.

6

не то, что я вижу. В настоящее время я создаю веб-приложение, которое использует <form>s, но я использую их, поэтому у меня есть резервный метод, если у пользователя отключен JavaScript (e.preventDefault останавливает разноску формы в обычном режиме). Для вашей ситуации, когда вы говорите, что пользователь должен иметь JavaScript, a <form> тег не нужен, Но это может быть идея сохранить его в любом случае, если браузеру нужно что-то сделать с ним или получить доступ к нему как к классу.

короче говоря, нет, вам не нужно использовать <form> Если вы делаете чистый AJAX, хотя оставить его может идея, если вы вдруг решите создать резервный код в будущем.

2

на мой взгляд: если вы используете его по семантическим причинам, используйте его по назначению. Атрибут action требуется (также может быть оставлен пустым), чтобы быть хорошо сформированным, также вы можете отделить свой URI-s от своей логики js, установив атрибут action и прочитав его перед вызовом ajax.

1

Я не понимаю, почему вам нужно использовать тег формы здесь. Единственная причина использования тега формы (кроме проверки разметки) заключается в том, что пользователь должен "отправить" данные с помощью тега sumbit или кнопки. Если вам не нужно этого делать, тогда нет необходимости в форме. Однако не уверен, будет ли это считаться "допустимой" разметкой. Если вы используете его, вы можете просто сделать <form action=""> as action является единственным обязательным атрибутом тега формы. Однако, вы воспитываете хорошее точка, будущее веб-приложений, вероятно, больше не будет нуждаться в форме и традиционной методологии представления. Очень интересно и делает меня счастливой. хе-хе :)

0