отправить данные формы на внешнюю форму без обновления страницы

Question

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

Вот моя форма.Он отправляется в порядке, но перенаправляет на внешнюю веб-страницу после отправки формы.

<form id="widget_contact" action="http://www.website.com/" method="post">
  <input type="text" name="pcode" id="fc_name" />
  <input type="hidden" name="hdnCmd" value="sb-gimme" />
  <input name="send_button" id="fc_submit" class="btn_b" type="submit" value="Gimme" />
</form>

Answer 1

Я работаю над страницей, которая отправляет запрос в веб-службу, которая возвращает файл JSON. Мой запрос вызывал перенаправление в файл JSON. Не то, что мне было нужно. Проблема была решена с помощью кода ниже:

var xmlhttp = new XMLHttpRequest();
<!-- Get Excel Spreadsheet Templates. -->
var url = "https://store.office.com/assets/templates/get?culture=en-CA&sourceIds=TM10000104,TM10000108,TM10000093,TM10000101,TM10000089,TM10000094,TM10000098,TM10000110,TM10000092,TM10000109,TM10000099,TM10000105,TM10000103,TM10000102,TM10000091,TM10000090,TM10000106,TM10000107,TM10000095,TM10000111&format=json";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, false);
xmlhttp.send();

function myFunction(response) {
    // Do what you need to do here, if anything!
}

Вы можете заменить переменную url на ваш URL для отправки. GET также можно заменить на POST.

Выезд: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp. Здесь подробно описывается получение и отправка данных с сервера и на сервер.

Надеюсь, это поможет.

Answer 2

Вот то, что я нашел, чтобы быть лучшим решением. Получите все имя s и значение s входных данных внутри формы и используйте это в теле запроса.

const formEl = document.querySelector('#form_id')
const payload = Array.from(formEl.querySelector('input').map(el => ({[el.name]: el.value}))

fetch(formEl.action, {
            method: formEl.method
            body: JSON.stringify(payload)
        })

Answer 3

Что вы можете сделать, это настроить файл PHP, который будет принимать данные формы, а затем отправлять данные на другой веб-сайт, используя HTTP POST.Вы бы отправили данные в свой собственный файл PHP, используя Ajax, чтобы избежать обновления.Вот пример того, как отправлять POST-данные на другой веб-сайт с использованием PHP (это только то, что я только что гуглил. Источник: http://wezfurlong.org/blog/2006/nov/http-post-from-php-without-curl)

<?php
function do_post_request($url, $data, $optional_headers = null)
{
  $params = array('http' => array(
              'method' => 'POST',
              'content' => $data
            ));
  if ($optional_headers !== null) {
    $params['http']['header'] = $optional_headers;
  }
  $ctx = stream_context_create($params);
  $fp = @fopen($url, 'rb', false, $ctx);
  if (!$fp) {
    throw new Exception("Problem with $url, $php_errormsg");
  }
  $response = @stream_get_contents($fp);
  if ($response === false) {
    throw new Exception("Problem reading data from $url, $php_errormsg");
  }
  return $response;
}

Вы также можете использовать cURL, что немного проще, нотребует, чтобы был установлен cURL.