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

Question 1

Методом window.open я открываю новый сайт с параметрами, которые мне нужно передать методом post. Я нашел решение, но, к сожалению, оно не работает. Это мой код:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
{
    var newWindow = window.open(url, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    newWindow.document.write(html);
    return newWindow;
}
</script>

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

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 
</script>

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

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />

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

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

Question 2

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

Пример:

<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>

<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>

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

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

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;
  window.open('', 'TheWindow');
  f.submit();
}

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

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

Question 3

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

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");

form.setAttribute("target", "view");

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);

window.open('', 'view');

form.submit();

Question 4

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

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').submit();

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

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').appendTo('body').submit().remove();

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

Question 5

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

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};         
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  form.setAttribute("target",winName);  
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = i;
      input.value = params[i];
      form.appendChild(input);
    }
  }              
  document.body.appendChild(form);                       
  window.open('', winName,windowoption);
  form.target = winName;
  form.submit();                 
  document.body.removeChild(form);           
}

Question 6

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

<form action="action.php" method="post" target="_blank">
    <input type="hidden" name="something" value="some value">
</form>

Добавьте скрытые поля так, как вы предпочитаете, а затем просто отправьте форму с помощью JS.

Question 7

Я создал функцию для создания формы на основе URL-адреса, цели и объекта в качестве метода POST/ GETdata и submit. Он поддерживает вложенные и смешанные типы внутри этого объекта, поэтому он может полностью реплицировать любую структуру, которую вы ему скармливаете: PHP автоматически анализирует ее и возвращает как вложенный массив. Однако есть одно ограничение: скобки [и ]не должны быть частью какого-либо ключа в объекте (например, {"this [key] is problematic" : "hello world"}). Если кто-то знает, как от него избавиться, скажите, пожалуйста!

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

Показать фрагмент кода

function getForm(url, target, values, method) {
  function grabValues(x) {
    var path = [];
    var depth = 0;
    var results = [];

    function iterate(x) {
      switch (typeof x) {
        case 'function':
        case 'undefined':
        case 'null':
          break;
        case 'object':
          if (Array.isArray(x))
            for (var i = 0; i < x.length; i++) {
              path[depth++] = i;
              iterate(x[i]);
            }
          else
            for (var i in x) {
              path[depth++] = i;
              iterate(x[i]);
            }
          break;
        default:
          results.push({
            path: path.slice(0),
            value: x
          })
          break;
      }
      path.splice(--depth);
    }
    iterate(x);
    return results;
  }
  var form = document.createElement("form");
  form.method = method;
  form.action = url;
  form.target = target;

  var values = grabValues(values);

  for (var j = 0; j < values.length; j++) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.value = values[j].value;
    input.name = values[j].path[0];
    for (var k = 1; k < values[j].path.length; k++) {
      input.name += "[" + values[j].path[k] + "]";
    }
    form.appendChild(input);
  }
  return form;
}

Развернуть фрагмент

Пример использования:

document.body.onclick = function() {
  var obj = {
    "a": [1, 2, [3, 4]],
    "b": "a",
    "c": {
      "x": [1],
      "y": [2, 3],
      "z": [{
        "a": "Hello",
        "b": "World"
      }, {
        "a": "Hallo",
        "b": "Welt"
      }]
    }
  };

  var form = getForm("http://example.com", "_blank", obj, "post");

  document.body.appendChild(form);
  form.submit();
  form.parentNode.removeChild(form);
}

Развернуть фрагмент

Question 8

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

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

var popupwindow;
var sharedObject = {};

function openPopupWindow()
{
   // Define the datas you want to pass
   sharedObject.var1 = 
   sharedObject.var2 = 
   ...

   // Open the popup window
   window.open(URL_OF_POPUP_WINDOW, NAME_OF_POPUP_WINDOW, POPUP_WINDOW_STYLE_PROPERTIES);
   if (window.focus) { popupwindow.focus(); }
}

function closePopupWindow()
{
    popupwindow.close();

    // Retrieve the datas from the popup window
    = sharedObject.var1;
    = sharedObject.var2;
    ...
}

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

var sharedObject = window.opener.sharedObject;

// function you have to to call to close the popup window
function myclose()
{
    //Define the parameters you want to pass to the main calling window
    sharedObject.var1 = 
    sharedObject.var2 = 
    ...
    window.opener.closePopupWindow();
}

Это оно !

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

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

Радоваться, веселиться!

Question 9

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

examplePostData = {
    method: 'POST',
    headers: {
       'Content-type' : 'application/json',
       'Accept' : 'text/html'
    },
    body: JSON.stringify({
        someList: [1,2,3,4],
        someProperty: 'something',
        someObject: {some: 'object'}
    })
}

asyncPostPopup = () => {

    //open a new window and set some text until the fetch completes
    let win=window.open('about:blank')
    writeToWindow(win,'Loading...')

    //async load the data into the window
    fetch('../postUrl', this.examplePostData)
    .then((response) => response.text())
    .then((text) => writeToWindow(win,text))
    .catch((error) => console.log(error))
}

writeToWindow = (win,text) => {
    win.document.open()
    win.document.write(text)
    win.document.close()
}

Question 10

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

Ссылка: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

решение: поместите standardSubmit: true в свой config. Надеюсь, это вам поможет :)

Question 11

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

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { target = "_blank" }))

{

// добавляем здесь скрытые и заполненные формы

}

Answer 1

Методом window.open я открываю новый сайт с параметрами, которые мне нужно передать методом post. Я нашел решение, но, к сожалению, оно не работает. Это мой код:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
{
    var newWindow = window.open(url, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    newWindow.document.write(html);
    return newWindow;
}
</script>

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

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 
</script>

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

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />

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

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

Answer 2

2

Что не работает? Я сохранил копию на jsfiddle.net/TZMMF, и она работает должным образом .

PleaseStand

Answer 3

Спасибо за ответ. Да, извините - приведенный выше код работает. Но я тестирую эту функцию с помощью массива ключей: <script type = "text / javascript"> var values = new Array ("value1", "value2", "value3") var keys = new Array ("1", "2 "," 3 ") // вместо a, b, c </script> я получаю значение Request.Form (" 2 ") В IE и Firefox я получаю пустую страницу.

luk4443

Answer 4

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

Пример:

<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />
</form>

<script type="text/javascript">
window.open('', 'TheWindow');
document.getElementById('TheForm').submit();
</script>

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

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

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;
  window.open('', 'TheWindow');
  f.submit();
}

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

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

Answer 5

Это именно то, о чем я думал. Хотя исходный опубликованный код действительно работал ... кроме IE.

PleaseStand

Answer 6

Спасибо за ответ. Но у меня есть таблица, в столбце которой кнопки. Когда я нажимаю эту кнопку, я открываю новую страницу и передаю некоторые параметры. Поэтому мне нужно написать функцию, и для каждой кнопки вызывать ее и передавать фиксированные аргументы. Мой вопрос, как я могу переписать Ваш приведенный выше код, чтобы он работал?

luk4443

Answer 7

1

@ luk4443: Если вы используете URL-адрес при открытии окна, страница будет просто заменена при публикации формы. Поместите URL-адрес в actionсвойство формы.

Guffa

Answer 8

1

@Guffa любой способ также смоделировать поведение target="_blank"?

everton

Answer 9

2

@EvertonAgner: используйте уникальное имя для окна, и оно будет работать как _blank.

Guffa

Answer 10

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

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "openData.do");

form.setAttribute("target", "view");

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);

window.open('', 'view');

form.submit();

Answer 11

5

Нет реализации на основе jQuery и чистого JavaScript. Спасибо.

Паван Пиллаи

Answer 12

2

Страница @Mercenary открыта в новой вкладке здесь, могу ли я открыть страницу в новом всплывающем окне?

Yaje

Answer 13

29

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

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').submit();

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

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">
       ...
   </form>').appendTo('body').submit().remove();

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

Андрюс Нарушявичюс
источник

7

Это решение неполное. Он должен сначала добавить эту форму в тело, а затем отправить его. Итак, где написано .submit (); он должен сказать .appendTo ('body'). submit ();

Джонатан ван де Вин

1

Без этой части $("body").append(form);ничего не получится

Аксель

4

Если вы добавите .remove()после предложения Джонатана .appendTo('body').submit(), вы даже очистите себя и не загромождаете текущую страницу объектами формы.

Саймон

Answer 14

7

Это решение неполное. Он должен сначала добавить эту форму в тело, а затем отправить его. Итак, где написано .submit (); он должен сказать .appendTo ('body'). submit ();

Джонатан ван де Вин

Answer 15

1

Без этой части $("body").append(form);ничего не получится

Аксель

Answer 16

4

Если вы добавите .remove()после предложения Джонатана .appendTo('body').submit(), вы даже очистите себя и не загромождаете текущую страницу объектами формы.

Саймон

Answer 17

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

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};         
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  form.setAttribute("target",winName);  
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = i;
      input.value = params[i];
      form.appendChild(input);
    }
  }              
  document.body.appendChild(form);                       
  window.open('', winName,windowoption);
  form.target = winName;
  form.submit();                 
  document.body.removeChild(form);           
}

Answer 18

12

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

<form action="action.php" method="post" target="_blank">
    <input type="hidden" name="something" value="some value">
</form>

Добавьте скрытые поля так, как вы предпочитаете, а затем просто отправьте форму с помощью JS.

Пирс
источник

Более того, поскольку window.openон будет заблокирован как всплывающее окно, если он не вызывается внутри clickобработчика (или любого подобного события,

инициированного

Answer 19

Более того, поскольку window.openон будет заблокирован как всплывающее окно, если он не вызывается внутри clickобработчика (или любого подобного события,

инициированного

Answer 20

Я создал функцию для создания формы на основе URL-адреса, цели и объекта в качестве метода POST/ GETdata и submit. Он поддерживает вложенные и смешанные типы внутри этого объекта, поэтому он может полностью реплицировать любую структуру, которую вы ему скармливаете: PHP автоматически анализирует ее и возвращает как вложенный массив. Однако есть одно ограничение: скобки [и ]не должны быть частью какого-либо ключа в объекте (например, {"this [key] is problematic" : "hello world"}). Если кто-то знает, как от него избавиться, скажите, пожалуйста!

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

Показать фрагмент кода

function getForm(url, target, values, method) {
  function grabValues(x) {
    var path = [];
    var depth = 0;
    var results = [];

    function iterate(x) {
      switch (typeof x) {
        case 'function':
        case 'undefined':
        case 'null':
          break;
        case 'object':
          if (Array.isArray(x))
            for (var i = 0; i < x.length; i++) {
              path[depth++] = i;
              iterate(x[i]);
            }
          else
            for (var i in x) {
              path[depth++] = i;
              iterate(x[i]);
            }
          break;
        default:
          results.push({
            path: path.slice(0),
            value: x
          })
          break;
      }
      path.splice(--depth);
    }
    iterate(x);
    return results;
  }
  var form = document.createElement("form");
  form.method = method;
  form.action = url;
  form.target = target;

  var values = grabValues(values);

  for (var j = 0; j < values.length; j++) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.value = values[j].value;
    input.name = values[j].path[0];
    for (var k = 1; k < values[j].path.length; k++) {
      input.name += "[" + values[j].path[k] + "]";
    }
    form.appendChild(input);
  }
  return form;
}

Развернуть фрагмент

Пример использования:

document.body.onclick = function() {
  var obj = {
    "a": [1, 2, [3, 4]],
    "b": "a",
    "c": {
      "x": [1],
      "y": [2, 3],
      "z": [{
        "a": "Hello",
        "b": "World"
      }, {
        "a": "Hallo",
        "b": "Welt"
      }]
    }
  };

  var form = getForm("http://example.com", "_blank", obj, "post");

  document.body.appendChild(form);
  form.submit();
  form.parentNode.removeChild(form);
}

Развернуть фрагмент

Answer 21

упс, URL в примере использования был искажен. если исправлено, значит, больше ошибок нет.

Церемония

Answer 22

1

Все еще кажется сломанным, у меня пустая страница.

Адам Паркин

Answer 23

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

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

var popupwindow;
var sharedObject = {};

function openPopupWindow()
{
   // Define the datas you want to pass
   sharedObject.var1 = 
   sharedObject.var2 = 
   ...

   // Open the popup window
   window.open(URL_OF_POPUP_WINDOW, NAME_OF_POPUP_WINDOW, POPUP_WINDOW_STYLE_PROPERTIES);
   if (window.focus) { popupwindow.focus(); }
}

function closePopupWindow()
{
    popupwindow.close();

    // Retrieve the datas from the popup window
    = sharedObject.var1;
    = sharedObject.var2;
    ...
}

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

var sharedObject = window.opener.sharedObject;

// function you have to to call to close the popup window
function myclose()
{
    //Define the parameters you want to pass to the main calling window
    sharedObject.var1 = 
    sharedObject.var2 = 
    ...
    window.opener.closePopupWindow();
}

Это оно !

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

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

Радоваться, веселиться!

Answer 24

примечание: window.openerподдерживается не всеми браузерами.

Raptor

Answer 25

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

examplePostData = {
    method: 'POST',
    headers: {
       'Content-type' : 'application/json',
       'Accept' : 'text/html'
    },
    body: JSON.stringify({
        someList: [1,2,3,4],
        someProperty: 'something',
        someObject: {some: 'object'}
    })
}

asyncPostPopup = () => {

    //open a new window and set some text until the fetch completes
    let win=window.open('about:blank')
    writeToWindow(win,'Loading...')

    //async load the data into the window
    fetch('../postUrl', this.examplePostData)
    .then((response) => response.text())
    .then((text) => writeToWindow(win,text))
    .catch((error) => console.log(error))
}

writeToWindow = (win,text) => {
    win.document.open()
    win.document.write(text)
    win.document.close()
}

Answer 26

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

Ссылка: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Basic-cfg-standardSubmit

решение: поместите standardSubmit: true в свой config. Надеюсь, это вам поможет :)

Answer 27

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

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { target = "_blank" }))

{

// добавляем здесь скрытые и заполненные формы

}

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

Ответы:

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