Содержание

XMLHttpRequest POST, формы и кодировка
GET-запрос
POST с urlencoded
Кодировка multipart/form-data
POST с multipart/form-data
FormData
Другие кодировки
Итого
Window.open and pass parameters by post method
10 Answers 10
Make a link open a new window (not tab) [duplicate]
5 Answers 5
HTML option
JavaScript option
Window.open и передать параметры методом post
10 ответов
Редактировать:
Похожие вопросы:

XMLHttpRequest POST, формы и кодировка

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

Более новая информация по этой теме находится на странице https://learn.javascript.ru/xmlhttprequest.

Во время обычной отправки формы

Здесь есть два поля: name=Ivan и surname=Ivanov .

Браузер перечисляет такие пары «имя=значение» через символ амперсанда & и, так как метод GET, итоговый запрос выглядит как /submit?name=Ivan&surname=Ivanov .

Все символы, кроме английских букв, цифр и — _ . !

* ‘ ( ) заменяются на их цифровой код в UTF-8 со знаком %.

Например, пробел заменяется на %20 , символ / на %2F , русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, Ц заменится на %D0%A6 .

Будет отправлена так: /submit?name=%D0%92%D0%B8%D0%BA%D1%82%D0%BE%D1%80&surname=%D0%A6%D0%BE%D0%B9 .

в JavaScript есть функция encodeURIComponent для получения такой кодировки «вручную»:

Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.

GET-запрос

Формируя XMLHttpRequest, мы должны формировать запрос «руками», кодируя поля функцией encodeURIComponent .

Например, для посылки GET-запроса с параметрами name и surname , аналогично форме выше, их необходимо закодировать так:

Браузер автоматически добавит к запросу важнейшие HTTP-заголовки, такие как Content-Length и Connection .

По спецификации браузер запрещает их явную установку, как и некоторых других низкоуровневых HTTP-заголовков, которые могли бы ввести в заблуждение сервер относительно того, кто и сколько данных ему прислал, например Referer . Это сделано в целях контроля правильности запроса и для безопасности.

Запрос, отправленный кодом выше через XMLHttpRequest , никак не отличается от обычной отправки формы. Сервер не в состоянии их отличить.

Поэтому в некоторых фреймворках, чтобы сказать серверу, что это AJAX, добавляют специальный заголовок, например такой:

POST с urlencoded

В методе POST параметры передаются не в URL, а в теле запроса. Оно указывается в вызове send(body) .

В стандартных HTTP-формах для метода POST доступны три кодировки, задаваемые через атрибут enctype :

application/x-www-form-urlencoded
multipart/form-data
text/plain

В зависимости от enctype браузер кодирует данные соответствующим способом перед отправкой на сервер.

В случае с XMLHttpRequest мы, вообще говоря, не обязаны использовать ни один из этих способов. Главное, чтобы сервер наш запрос понял. Но обычно проще всего выбрать какой-то из стандартных.

В частности, при POST обязателен заголовок Content-Type , содержащий кодировку. Это указание для сервера – как обрабатывать (раскодировать) пришедший запрос.

Для примера отправим запрос в кодировке application/x-www-form-urlencoded :

Всегда используется только кодировка UTF-8, независимо от языка и кодировки страницы.

Если сервер вдруг ожидает данные в другой кодировке, к примеру windows-1251, то их нужно будет перекодировать.

Кодировка multipart/form-data

Кодировка urlencoded за счёт замены символов на %код может сильно «раздуть» общий объём пересылаемых данных. Поэтому для пересылки файлов используется другая кодировка: multipart/form-data.

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

Чтобы использовать этот способ, нужно указать его в атрибуте enctype и метод должен быть POST:

Форма при такой кодировке будет выглядеть примерно так:

…То есть, поля передаются одно за другим, значения не кодируются, а чтобы было чётко понятно, какое значение где – поля разделены случайно сгенерированной строкой, которую называют «boundary» (англ. граница), в примере выше это RaNdOmDeLiMiTeR :

Сервер видит заголовок Content-Type: multipart/form-data , читает из него границу и раскодирует поля формы.

Такой способ используется в первую очередь при пересылке файлов, так перекодировка мегабайтов через urlencoded существенно загрузила бы браузер. Да и объём данных после неё сильно вырос бы.

Однако, никто не мешает использовать эту кодировку всегда для POST запросов. Для GET доступна только urlencoded.

POST с multipart/form-data

Сделать POST-запрос в кодировке multipart/form-data можно и через XMLHttpRequest.

Достаточно указать в заголовке Content-Type кодировку и границу, и далее сформировать тело запроса, удовлетворяющее требованиям кодировки.

Пример кода для того же запроса, что и раньше, теперь в кодировке multipart/form-data :

Тело запроса будет иметь вид, описанный выше, то есть поля через разделитель.

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

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

FormData

Современные браузеры, исключая IE9- (впрочем, есть полифил), поддерживают встроенный объект FormData, который кодирует формы для отправки на сервер.

Это очень удобно. Например:

Этот код отправит на сервер форму с полями name , surname и patronym .

Конструктор new FormData([form]) вызывается либо без аргументов, либо с DOM-элементом формы.
Метод formData.append(name, value) добавляет данные к форме.

Объект formData можно сразу отсылать, интеграция FormData с XMLHttpRequest встроена в браузер. Кодировка при этом будет multipart/form-data .

Другие кодировки

XMLHttpRequest сам по себе не ограничивает кодировку и формат пересылаемых данных.

Поэтому для обмена данными часто используется формат JSON:

Итого

У форм есть две основные кодировки: application/x-www-form-urlencoded – по умолчанию и multipart/form-data – для POST запросов, если явно указана в enctype . Вторая кодировка обычно используется для больших данных и только для тела запроса.
Для составления запроса в application/x-www-form-urlencoded используется функция encodeURIComponent .
Для отправки запроса в multipart/form-data – объект FormData .
Для обмена данными JS ↔ сервер можно использовать и просто JSON, желательно с указанием кодировки в заголовке Content-Type .

В XMLHttpRequest можно использовать и другие HTTP-методы, например PUT, DELETE, TRACE. К ним применимы все те же принципы, что описаны выше.

Window.open and pass parameters by post method

With window.open method I open new site with parameters, which I have to pass by post method.I’ve found solution, but unfortunately it doesn’t work. This is my code:

Next, I create arrays:

And call function by:

But, when I click on this button, the site test.asp is empty (of course I try get pass values — Request.Form(«b») ).

How could I solve this problem, why I can’t get pass values?

10 Answers 10

Instead of writing a form into the new window (which is tricky to get correct, with encoding of values in the HTML code), just open an empty window and post a form to it.

To set the values in the form dynamically, you can do like this:

To post the form you call the function with the values, like openWindowWithPost(‘a’,’b’,’c’); .

Note: I varied the parameter names in relation to the form names to show that they don’t have to be the same. Usually you would keep them similar to each other to make it simpler to track the values.

Since you wanted the whole form inside the javascript, instead of writing it in tags, you can do this:

Even though I am 3 years late, but to simplify Guffa’s example, you don’t even need to have the form on the page at all:

Edited:

Maybe a helpful tip for someone 🙂

I completely agree with mercenary’s answer posted above and created this function for me which works for me. It’s not an answer, it’s a comment on above post by mercenary

You could simply use target=»_blank» on the form.

Add hidden inputs in the way you prefer, and then simply submit the form with JS.

I created a function to generate a form, based on url, target and an object as the POST / GET data and submit method. It supports nested and mixed types within that object, so it can fully replicate any structure you feed it: PHP automatically parses it and returns it as a nested array. However, there is a single restriction: the brackets [ and ] must not be part of any key in the object (like <"this Open post request in new windows is problematic" : "hello world">). If someone knows how to escape it properly, please do tell!

Make a link open a new window (not tab) [duplicate]

Is there a way to make a link open a new browser window (not tab) without using javascript?

5 Answers 5

With pure HTML you can’t influence this — every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past.

HTML option

You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly «new tab» instead of «new window». You have no influence on that, and you can’t «force» modern browsers to open a new window.

In order to do this, use the anchor element’s attribute target [1] . The value you are looking for is _blank [2] .

JavaScript option

Forcing a new window is possible via javascript — see Ievgen’s excellent answer below for a javascript solution.

(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!

_{[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)}

_{[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent , _self or _top .}

Window.open и передать параметры методом post

С помощью метода window.open я открываю новый сайт с параметрами, которые я должен передать по почте method.I’ve найденного решения, но, к сожалению, это не работает. Это мой код:

Далее я создаю массивы:

И вызовите функцию по:

Но, когда я нажимаю на эту кнопку, сайт test.asp пуст (конечно, я пытаюсь получить значения pass — Request.Form(«b») ).

Как я мог бы решить эту проблему, почему я не могу получить значения pass?

10 ответов

Как передать параметры в методе window.open.

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

Редактировать:

Чтобы установить значения в форме динамически, вы можете сделать это следующим образом:

Чтобы разместить форму, вы вызываете функцию со значениями, например openWindowWithPost(‘a’,’b’,’c’); .

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

Поскольку вы хотели, чтобы вся форма была внутри javascript, вместо того чтобы писать ее в тегах, вы можете сделать это:

Несмотря на то, что я опоздал на 3 года, но чтобы упростить пример Гаффы, вам даже не нужно иметь форму на странице вообще:

Отредактированный:

Может быть, полезный совет для кого-то 🙂

У меня есть следующий метод в JavaScript: var string1 = testing; var date = 10/10/2012; var win = window.open(BuildUrl((report, report), myreports, toolbar=0,statusbar=0,scrollbars=1,resizable=1,location=0); function BuildUrl(controllerName, actionName) < var TimeStamp = Number(new Date()); var.

Как передать параметры из href не методом GET? Я использую spring. может быть, инструменты spring могут мне помочь? по методу get: $ candidate.id передача методом get Как передать candidate.id по почте (например, методом)?

Я полностью согласен с ответом наемника, опубликованным выше, и создал для меня эту функцию, которая работает для меня. Это не ответ, Это комментарий к вышеприведенному посту наемника

Вы можете просто использовать target=»_blank» в форме.

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

Я создал функцию для генерации формы, основанной на url, target и объекте в качестве метода POST / GET data and submit. Он поддерживает вложенные и смешанные типы внутри этого объекта, поэтому он может полностью реплицировать любую структуру, которую вы ему передаете: PHP автоматически анализирует его и возвращает в виде вложенного массива. Однако есть одно ограничение: скобки [ и ] не должны быть частью какого-либо ключа в объекте (например, <"this Open post request in new windows is problematic" : "hello world">)., если кто-то знает, как правильно его избежать, пожалуйста, скажите!

Без лишних слов, вот источник:

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

На главной странице :

Во всплывающем окне :

И это очень удобно, потому что:

Вы не должны устанавливать параметры в URL всплывающего окна.
Нет формы для определения
Вы можете использовать неограниченные параметры даже объектов.
Двунаправленный : вы можете передать параметры AND, если хотите, можете восстановить новые параметры.
Очень легко реализовать.

Я хотел сделать это в React, используя простой Js и Fetch polyfill . OP не сказал, что он специально хочет создать форму и вызвать в ней метод submit, поэтому я сделал это, разместив значения формы как json:

Действие отправки по умолчанию — Ext.form.action.Submit, которое использует запрос Ajax для отправки значений формы в настроенный URL. Чтобы включить обычную отправку формы Ext в браузере, используйте опцию standardSubmit config.

решение: поместите standardSubmit: true в свою конфигурацию. Надеюсь, что это поможет вам 🙂

Я использовал это в прошлом, так как мы обычно используем синтаксис razor для кодирования

// добавить скрытое и форму, поданную здесь >

Open post request in new windows