Блог

Главная - Вопросы по программированию - Как получить доступ к данным формы после отправки на новый URL

Как получить доступ к данным формы после отправки на новый URL

#javascript #node.js #reactjs

#javascript #node.js #reactjs

Вопрос:

Я хочу отправить данные формы на совершенно новый URL-адрес нажатием кнопки отправки. Это в приложении React. У меня есть базовая настройка формы следующим образом.

     let form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action",'localhost:3000/message/');
    form.setAttribute("onSubmit", this.handleSubmit);
    form.setAttribute("target", 'newWindow');

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

    window.open('localhost:3000/message/', 'newWindow');
    form.submit();
  
 handleSubmit(e) {
    e.preventDefault();
}

На этом этапе, когда я отправляю, открывается новая вкладка localhost:3000/message , но на этой вкладке также выполняется сетевой запрос localhost:3000/message/ с данными формы.

Я хочу остановить дополнительный сетевой вызов localhost:3000/message/ , и я также хочу иметь доступ к данным формы непосредственно в приложении, работающем на 3000.

Достижимо ли это?

ОБНОВЛЕНИЕ: как упоминал @Jite, выборка устранит некоторые проблемы, поэтому вместо прямой отправки данных в виде формы я также попытался отправить их через fetch api.

     window.open('localhost:3000/message/', 'newWindow');

    fetch('localhost:3000/message/', {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        message: 'Hi, I'm even more awesome!'
      })
    })

Метод визуализации приложения, запущенного в localhost:3000 , настраивается следующим образом-

   //import { BrowserRouter as Router, Route } from "react-router-dom";

  render() {
    return (
        <Router>
          <Route
            path="/message"
            render={props =>     
              <h2>Any message for me ?</h2>
            }
          />
        </Router>
    );
  }

Я все еще не понимаю, как получить доступ к сообщению, отправляемому на этот URL.

Комментарии:

1. Не могли бы вы сделать это с помощью вызова выборки на первой «вкладке»? Если вы откроете новую вкладку, это, по сути, новый процесс, и для выполнения того, что вы просите, потребуется немало неприятного кодирования! Я думаю, что было бы неплохо, если бы вы написали, чего вы хотите достичь, потому что я думаю, что то, что вы собираетесь сделать, можно было бы сделать лучше 🙂

2. Да, это действительно кажется глупым способом делать вещи 🙂 Ну, по сути, у меня есть 2 веб-приложения, и мне нужно открыть второе веб-приложение (новая вкладка) из первого, а также отправить некоторые данные. Выборка кажется хорошим способом сделать что-то, но я все еще не уверен, как я буду получать доступ к данным, отправляемым на вторую вкладку. Я обновлю вопрос, чтобы также включить опцию выборки.

Ответ №1:

На данный момент мне удалось решить проблему, отправив данные с window.postMessage() помощью и получив к ним доступ в новом окне, прослушав message событие.