@kaN5300

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

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

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


Асинхронная:
$.post("/login", {mark: $("input.mark").value()}, function(res) {
  // Здесь вставляете ответ сервера в какой-то тэг
 })
Ответ написан
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 получает запрос и отдаёт ответ.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы