Как отправить форму аяксом и на выходе получить то же самое, что и через обычный action?

Question

[kn1ght_t]

Нужно отправить некую форму на внешний php скрипт так, чтобы он (скрипт) не отличил то, что на выходе примет, от обычного action с post методом у формы

то есть есть форма, например:

<form id="amoforms_form" class="amoforms-form amoforms-view-form" action="https://forms.amocrm.ru/queue/add" method="post">
					<input id="fields[name_1]" 	type="text" name="fields[name_1]" class="text-input ">
					<input id="fields[828922_1]" type="text" class="text-input amoforms-validate_required" name="fields[828922_1][1870092]" >
					<input id="fields[828924_1]" type="text" class="text-input amoforms-validate_email" name="fields[828924_1][1870104]">
					<input id="fields[1274563_1]" type="text" name="fields[1274563_1]" class="text-input">
					<input type="hidden" name="form_id" id="form_id" value="8259">
					<input type="hidden" name="hash" value="aa57662b9b402c0e563dd73b81d23e93">
					<input type="hidden" name="user_origin" id="user_origin" value="" />
					<input type="hidden" name="fields[_2]" id="utm_source" value="" />
					<input type="hidden" name="fields[_2]" id="utm_medium" value="" />
					<input type="hidden" name="fields[_2]" id="utm_campaign" value="" />
					<input type="hidden" name="fields[_2]" id="utm_term" value="" />
					<input type="hidden" name="fields[_2]" id="ga" value="" />
					<button type="submit" id="button_submit" class="">Получить</button>
</form>

она отправляется через action атрибут на внешний урл, соответственно после отправки я попадаю на страничку с этим скриптом и вижу результат обработки запроса
я же хочу остаться на своей текущей страничке и просто отправить данные
здесь бы мне прекрасно помог ajax, но я не знаю, в каком виде отправлять, чтобы сервер получил данные в правильном формате

как можно решить данную проблему?

Comments

[Chamie]

На внешний URL (на другом домене) вы запрос JavaScript'ом никак не отправите. Same origin policy же!

[kn1ght_t]

Chamie: разве? тем не менее, запрос отправляется прекрасно)

Answer 1

[Александр Таратин]

malsup.com/jquery/form для ленивых

Comments

[Chamie]

Две строчки кода реализовывать ОТДЕЛЬНЫМ ПЛАГИНОМ к jQuery? o__O

[Александр Таратин]

Chamie: Поэтому для ленивых.

Answer 2

[kn1ght_t]

нашел такое решение еще:

$('form').on('submit',function(e){
    e.preventDefault();
    $.ajax({
        type     : "POST",
        cache    : false,
        url      : $(this).attr('action'),
        data     : $(this).serialize(),
        success  : function(data) {
            alert('success');
        }
    });
});

то есть все данные формы в дата класть через data: $(this).serialize()

Comments

[Евгений Петров]

Да вы издеваетесь?) В каждой теме про AJAX это есть. И нашли плохо — не нужно засовывать callback в метод success, рекомендуется использовать done(). На дворе уже promise.
Да, и запросы методом POST не кэшируются. Так что и отменять там нечего.

[kn1ght_t]

Евгений Петров: напишите, как надо) я ж нубас) оно работает и ладно) кэширование уберу, а вот насчет done() не очень понял)

[Евгений Петров]

$(document).on('submit', 'form', function (e) {
	e.preventDefault();
	$.ajax({
		type: 'POST',
		url: this.action,
		data: $(this).serialize()
	}).done(function(data) {
		//Успех
	}).fail(function(data) {
		//Неудача
	});
});

[kn1ght_t]

Евгений Петров: спасибо, Евгений, а можете прокомментировать эту фразу "На внешний URL (на другом домене) вы запрос JavaScript'ом никак не отправите. Same origin policy же!" ?
в моем случае запрос как раз на внешний урл аяксом отправляется, но тем не менее этот внешний скрипт данные получает и обрабатывает их

[Евгений Петров]

https://ru.wikipedia.org/wiki/Cross-origin_resourc...
https://ru.wikipedia.org/wiki/JSONP

[kn1ght_t]

Евгений Петров: вот консолька пишет такое "XMLHttpRequest cannot load https://forms.amocrm.ru/queue/add. The 'Access-Control-Allow-Origin' header has a value 'https://forms.amocrm.com' that is not equal to the supplied origin. Origin 'www.resultative.ru' is therefore not allowed access." + выполняется то, что в fail написано. Но тем не менее данные все равно успешно приняты со стороны внешнего сервера
из того, что Вы скинули, я понял, что, видимо, со стороны сервера стоит Access-Control-Allow-Origin: *

[Евгений Петров]

Именно сервер решает, кому отдавать, а кому нет. А вы подумали, что каждый сайт может слать AJAX куда угодно?

[kn1ght_t]

Евгений Петров: он и может ведь) только его не везде ждут)

[Евгений Петров]

kn1ght_t: Это — какая-то болтология. Я имел ввиду именно положительный результат и то, что должно быть сделано для его получения.

[kn1ght_t]

Евгений Петров: ладно, согласен

Answer 3

[Chamie]

Для этого есть объекты FormData. Просто заполняем такой из существующей формы

var formData = new FormData(document.querySelector("#amoforms_form"));

А потом отправляем его как данные запроса

var request = new XMLHttpRequest();
request.open("POST", "queue/add");
request.send(new FormData(formElement));

Но на другой домен так отправить запрос не получится.

Comments

[Евгений Петров]

Если нет данных из поля с типом file, то и без FormData можно обойтись, только заголовок указать потребуется.

[NaN]

Получится, если другой домен отдает access-control-allow-origin: * или ваше имя и совпадает протокол