отправка формы при нажатии на ссылку

Отправка форм при помощи JavaScript

Формы не всегда формы

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

Получение контроля над глобальным интерфейсом

Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).

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

Асинхронная отправка произвольных данных обычно называется AJAX, что означает «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML).

Чем он отличается?

Замечание: Сейчас Fetch API часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.

Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.

Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.

Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.

Отправка данных формы

Есть три способа отправки данных формы:

Источник

Как отправить форму по нажатию на ссылку?

Этот вопрос входит, наверное, в ТОП10 вопросов на форумах 🙂 Скорей всего это требование дизайнера или заказчика.

Итак, решение, на первый взгляд, простое:

a href = «#» onclick = «document.getElementById(‘myform’).submit(); return false;» > Отправить / a >

Но тут же возникает (как ни странно 🙂 следующий вопрос это, а если JS будет у посетителя отключен?

Изменим наш код на:

input type = «submit» value = «Отправить» class = «link» / >

И добавим немного JS:

/* Получаем родительскую форму для элемента */
function getParentForm ( obj ) <
while ( ( obj = obj. parentNode ) ) <
if ( obj. nodeName == ‘FORM’ ) <
break ;
>
>
return obj ;
>

/* Отправляем форму по нажатию на ссылку */
function linkClick ( e ) <
var e = window. event || e ;
var target = e. target || e. srcElement ;
var parentForm = getParentForm ( target ) ;
parentForm. submit ( ) ;

button type = «submit» class = «link» > span > Отправить / span > / button >

Также изменим соответственно часть JS.

CSS будет выглядеть следующим образом:

/* Убираем отступы */
margin : 0 ;
padding : 0 ;

/* Убираем все элементы оформления кнопки */
background : none ;
border : none ;

/* Обычный для ссылок курсор */
cursor : pointer ;
>

Остальные стили будут уже зависеть от конкретного дизайна.

UPD
insa предложил еще один очень хороший вариант, единственный минус которого в том, что label не сможет получить фокус.

form >
input type = «text» name = «a» / >
input type = «submit» id = «push-me» style = «display:none» / >
/ form >

label for = «push-me» > fake submit / label >

UPD2
К сожалению, вариант, предложенный insa, не кроссбраузерный (читайте комментарии).

Источник

Отправить POST данные при нажатии на ссылку, отличия методов GET и POST

При разработке сайта, обычно возникает потребность отправки тех или иных данных на сервер, на сегодняшний день самыми популярными методами запроса для отправки таких данных являются методы GET и POST. Существуют еще и другие методы, например, PUT и DELETE – но они малоиспользуемые.

Самый простой в использовании метод – это конечно же GET. Он используется при большинстве запросов страниц сайта, к примеру, при их просмотре через браузер. Когда пользователь набирает адрес в строке или нажимает на ссылку на сайте – с большой долей вероятности используется метод GET. Этот метод можно использовать для отправки небольших данных, например, строк текста. Недостаток – все данные видны в строке браузера.

Второй по популярности – метод POST, отличается от GET он расширенными возможностями отправки данных. Часто используется для загрузки файла или получения данных с заполненной веб-формы. Данные отправляются незаметно для пользователя. В отличии от метода GET, POST в основном используется для отправки данных на сервер, в то время как GET чаще применяют для получения информации от сервера. Метод POST следует использовать для отправки конфиденциальных данных.

Кратко рассмотрев отличия методов GET и POST, перейдем к решению задачи отправки данных методом POST при нажатии на ссылку. Такая потребность может часто возникнуть при создании различного функционала на разрабатываемом проекте.

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

Для решения проблемы отправки данных методов POST, можно использовать обычную форму form с кнопкой input type=submit. Эту кнопку визуально можно сделать похожей на обычную ссылку, при помощи стилей CSS. Задача решена, форма выглядит как обычная ссылка, а данные отправляются незаметно, методом POST. Такой подход часто можно использовать на разных страницах, чтобы избежать создания дополнительных адресов.

Ниже приводится пример:

В браузере данный код будет выглядеть слежующим образом:

Что касается сериализованных данных, то можно предварительно подготовить их при помощи специальных функций языка, например, на PHP можно использовать json_encode и serialize. После этого, эти данные просто вставляются в скрытое поле формы hidden. Таким способом, например, можно отправить массив PHP методом POST на другую страницу.

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

Источник

Как отправить HTML-форму без перезагрузки страницы

Что такое AJAX

При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.

Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.

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

Здесь мы создадим демо-проект, который будет включать в себя 3 файла:

Создайте первый файл под названием index.php с таким содержимым:

Выводы

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

Источник

Отправка данных формы

Куда отправляются данные?

Здесь мы обсудим, что происходит с данными при отправке формы.

О клиентской/серверной архитектуре

WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как Apache, Nginx, IIS, Tomcat, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.

Примечание: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем «Первые шаги в программировании на стороне сервера».

На стороне клиента: определение способа отправки данных

Атрибут action

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

В этом примере данные отправляются на абсолютный URL — http://foo.com :

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

Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут action был обязательным. Это больше не нужно.

Атрибут method

Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.

Метод GET

Рассмотрим следующую форму:

HTTP-запрос имеет следующий вид:

Примечание: вы можете найти этот пример на GitHub — смотрите get-method.html (see it live also).

Метод POST

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

Примечание: вы можете найти этот пример на GitHub — смотрите post-method.html (see it live also).

Просмотр HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

Затем вы можете получить данные формы, как показано на рисунке ниже.

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

На стороне сервера: получение данных

Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.

Пример: Чистый PHP

Примечание: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать MAMP (Mac and Windows) и/или AMPPS (Mac, Windows, Linux).

Пример: Python

Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется Flask framework для визуализации шаблонов, поддерживающих форму отправки данных (смотри python-example.py).

Два шаблона из коде выше взаимодействуют так:

Другие языки и фреймворки

Примечание: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом.

Особый случай: отправка файлов

Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.

Атрибут enctype

Если хотите отправить файл, нужно сделать следующие три шага:

Предупреждение: Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.

Проблемы безопасности

Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.

В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:

XSS «Межсайтовый скриптинг» и CSRF «Подделка межсайтовых запросов»

Межсайтовый скриптинг (XSS «Cross Site Request Forgery») позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. Подделка межсайтовых запросов (CSRF «Cross-Site Scripting») может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же политика происхождения. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.

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

Источник