Задать вопрос
@kaN5300
javascript

Как организовать обработку формы на отдельном сервере?

Есть внешний сервис который может принимать на вход GET запрос и формировать в ответ xml или json с результатом. Результат может быть положительный либо отрицательный. Например 1. С этой частью мне всё ясно. Задача состоит в том что надо организовать на фронтенде обработку формы таким образом чтобы взаимодействие с сервисом происходило прозрачно для пользователя. Он вводит данные в форму и получает результат оставаясь при этом на том же ресурсе куда была встроена форма. Затрудняюсь с выбором инструмента. Куда копать?
  • Вопрос задан
  • 445 просмотров
1 комментарий
Подписаться 2 Оценить 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
crazy_leo
@crazy_leo
Frontend Developer
Есть два вида отправки: с перезагрузкой и без.

Перезагрузка:
<form action="/" method="POST">
 <input placeholder="Введите название марки">
 <button>Показать марки по запросу</button>
</form>


Асинхронная:
$.post("/login", {mark: $("input.mark").value()}, function(res) {
  // Здесь вставляете ответ сервера в какой-то тэг
 })
Ответ написан
1 комментарий
1 комментарий
Jeer
@Jeer
уверенный пользователь
Эм, есть такая штука, политика ограничения доменных имён. Это означает, что с одного доменного имени нельзя выполнить запрос яваскриптом на другое доменное имя. Если тот второй сервер не ваш и не заточен для обхода этого ограничения (jsonp), то вам остается сделать на своём сервере проксирующий метод.
Таким образом общение будет происходить в два этапа:
первое, вы делаете ajax со своей страницы на свой сервер
если без заморочек, берите jQuery https://api.jquery.com/jquery.post/
$.post( "test.php", { name: "John", time: "2pm" })
  .done(function( data ) {
    alert( "Data Loaded: " + data );
  });

Второе: ваша страница test.php (не обязательно php, я просто не знаю, на чём вы пишете) на сервере выполняет серверный post запрос на чужой сервер и возвращает их ответ. Если используются параметры, то, соответственно, они должны быть указаны в вашем методе, должны быть указаны в вашем ajax и из метода должны дублироваться в запрос на левый сервер
Ответ написан
Комментировать
Комментировать
@kaN5300 Автор вопроса
Решилось вот таким образом через JSONP:

<!DOCTYPE html>
<html>

    <body>

        <p>Введите данные и нажмите кнопку [ПРОВЕРКА]</p>

        <form enctype='application/json'>
            <input type="text" id="search" name="search"/>
            <script type="text/javascript">
                var I = document.getElementById('search');
                // alert(I.value);
                function clickButton() {
                var obj, s
                    obj = { "search":I.value };
                    s = document.createElement("script");
                    s.src = "http://127.0.0.1/?x=" + JSON.stringify(obj);
                    document.body.appendChild(s); } 
                function search(myObj) {
                document.getElementById("result").innerHTML = myObj.result;
                }

            </script>
        </form>

        <button onclick="clickButton()">[ПРОВЕРКА]</button>
        <p id="result"></p>
    </body>
</html>


На удалённой стороне python3/tornado получает запрос и отдаёт ответ.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать HLTV HUD для стрима CS 1.6
25 апр. 2024, в 08:02
2500 руб./за проект
Вычислить размер объекта по карте глубин
25 апр. 2024, в 07:37
5000 руб./за проект
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Ещё заказы