Как отправить данные формы html на другой веб-сервер нажатием кнопки - PullRequest
Новая
       33

Как отправить данные формы html на другой веб-сервер нажатием кнопки

0 голосов
/ 27 мая 2020

У меня два веб-сервера. Один работает с моим интерфейсом (example.com), другой с моим сервером (api.example.com).

На моем интерфейсе (example.com) у меня есть этот код, который является простым html веб-сайт с формой, полем ввода и кнопкой. Когда я нажимаю кнопку, я хочу получить эти данные и отправить их в серверную часть (api.example.com). Например, я ввожу «nathan» в поле имени пользователя интерфейса пользователя и нажимаю кнопку. Я хочу, чтобы он отправил меня на api.example.com/sendcode?username=nathan

В настоящее время у меня есть этот код, но кнопка удерживает меня на том же веб-сайте, а не на совершенно другом URL: 

<form class="login100-form validate-form flex-sb flex-w" action="api.example.com" method="POST">
                <span class="login100-form-title p-b-51">
                    Request for a code
                </span>


                <div class="wrap-input100 validate-input m-b-16" data-validate = "Username is required">
                    <input class="input100" type="text" name="username" placeholder="Username">
                    <span class="focus-input100"></span>
                </div>


                <div class="container-login100-form-btn m-t-17">
                    <button class="login100-form-btn">
                        Send code
                    </button>
                </div>

                <div class="flex-sb-m w-full p-t-3 p-b-24">
                    <div class="contact100-form-checkbox">
                    </div>
                </div>
            </form>

С помощью этого кода он отправляет меня на 'example.com/api.example.com?username=nathan'. Как бы я это исправить, хотел бы, чтобы они оставались совершенно разными?

Ответы [ 3 ]

1 голос
/ 27 мая 2020

Вам нужен полный URL-адрес с протоколом - предпочтительно https, как в action="https://api.example.com/sendcode"

Пожалуйста, найдите AJAX и процесс вашего сервера. В качестве альтернативы используйте fetch 

const username = document.querySelector("[name= username]").value;
fetch('https://api.example.com/sendcode?username='+encodeURIComponent(username))
  .then(response => response.json())
  .then(data => console.log(data));

Чтобы использовать Ajax, вам нужно захватить событие отправки

Здесь я использую jQuery для скорости кодирования примера, просто включите <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> на странице, чтобы использовать 

$(".login100-form").on("submit", function(e) {
  e.preventDefault(); // stop submit
  $.post('https://api.example.com/sendcode', 
    { data : $(this).serialize() }, // the form content in key=value format
    function(response) {
      console.log(response)
    })  
})
1 голос
/ 27 мая 2020

Измените действие формы, чтобы включить http: // например, 

<form class="login100-form validate-form flex-sb flex-w" action="http://api.example.com" method="POST">
0 голосов
/ 27 мая 2020

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

...