С JavaScript и AJAX мне все еще нужен тег HTML <form>, и мне все еще нужно отправлять формы на сервер с помощью кнопки "отправить"?

Назад, когда я изучил HTML, CGI был королем, и надлежащим образом взаимодействовать с сервером было размещение тегов <input> внутри тега <form>. Когда пользователь нажал кнопку "отправить", на сервер было отправлено сообщение HTTP GET или HTTP POST, а браузер обновлен с использованием кода HTML, возвращаемого из программы CGI на сервере.

Теперь я снова начал делать веб-материал, и изучал JavaScript и jQuery. Поскольку jQuery может перехватывать такие события, как click, keypress и focusout, и может читать данные с $.ajax() и $.getJSON(), есть ли вообще необходимость иметь тег <form>?

Может быть, "реальные формы" по-прежнему необходимы, если я хочу поддерживать пользователей, у которых отключен JavaScript?

Ответы

Ответ 1

Формы все еще могут помочь вам, но короткий ответ - нет, не совсем.

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

$.ajax({
    url: 'ajax/test.html',
    dataType: 'json',
    method: 'POST',
    content: $('form#login_form').serialize(), // <-- Serialize elements only in
    success: function(data) {                  //     the login_form container.
        $('.result').html(data);
    }
});

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

Ответ 2

Если вы используете ajax, если у вас нет прямых сообщений или нет, тег формы не требуется. Тем не менее, он по-прежнему является хорошим html-дизайном.

Ответ 3

Вы можете сделать и то, и другое, или отправить. Это может зависеть от того, какой элемент формы вы хотите прослушать для изменений. Но вы можете сделать что-то вроде этого как один пример:

<SELECT NAME="tree" onchange="doSomething( someVar );">

Но опять же, это зависит от того, какой элемент страницы вы хотите манипулировать.