Arhn - архитектура программирования

Почему мне нужно удалить ввод формы Child для вызова пользовательского API GAE

Все, что я хочу сделать, это передать строку глупому простому API конечных точек GAE, который просто возвращает то, что я отправил. В учебных целях я хочу сделать это без использования библиотек Google Javascript или Jinja, Flask, Webapp2 и т. д. OBTW, да, я знаю об API Explorer. Кажущаяся простота запроса заставила меня задуматься, как это сделать без использования API Explorer.

Приведенный ниже код не очень хорош, он просто для проверки API. (и да, я начал с примера Google Tac-Tac-Toe)

В моем Javascript вы увидите form1.removeChild(input1). После попытки построить строку запроса, используя значение в <input type=text>; Я обнаружил, что удаление дочернего элемента (<input type=text>) из формы заставило его работать как базовый статический URL-адрес (который является вторым элементом формы в HTML ниже).

Если дочерний элемент ввода не удален, я получаю следующую ошибку на локальном сервере dev GAE.

File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/decoder.py", line 384, in raw_decode
    raise ValueError("No JSON object could be decoded")
ValueError: No JSON object could be decoded

Глядя на заголовок запроса в инструментах разработчика Chrome, я вижу, что заголовки одинаковы для двух форм. Разница в том, что у первого есть Form-Data, а у второго нет. Оба имеют строку запроса.

У меня два вопроса: есть ли способ настроить Endpoints API для обработки Form-Data без библиотеки GAE JS?

Используя только JS, есть ли другой способ сделать это чище? Это означает, что Form-Data не нужно удалять.

Я понимаю, что библиотека GAE Javascript — правильный путь. Опять же, я просто пытаюсь убедиться, что я понимаю основы здесь.

Вот API (Python):

import endpoints
from protorpc import remote, messages

CLIENT_ID = '[from the developer console]'

class StubMessageIn(messages.Message):
   tell_me = messages.StringField(1)

@endpoints.api(name='tictactoe',
           version='v1',
           allowed_client_ids=[CLIENT_ID],
           audiences=[CLIENT_ID])
class TicTacToeApi(remote.Service):

@endpoints.method(request_message=StubMessageIn,
                  response_message=StubMessageIn,
                  path='stub2',
                  name='stub_method_2',
                  http_method='POST')
def stub_it2(self, request):
    return request

APPLICATION = endpoints.api_server([TicTacToeApi],
                               restricted=False)

Вот HTML и JS:

<body>
<script>
    function do_it() {
        var form1 = document.getElementById('f1');
        var input1 = document.getElementById("tell_me");
        var data1 = input1.value;
        var data2 = "?tell_me=" + data1 ;
        var url1 = "http://localhost:16080/_ah/api/tictactoe/v1/stub2";
        console.log("Going to: " + url1 + data2);
        form1.method = "POST";
        form1.action = url1 + data2;
        form1.removeChild(input1)
        form1.submit()
        return false;
    }
</script>

<form onsubmit="do_it();"
    name = f1
    id = f1>
    <input type='text' name = 'tell_me' id = 'tell_me'>
    <input type='submit' value = "Submit -w- JS">
</form>

<form method="POST"
    action = "http://localhost:16080/_ah/api/tictactoe/v1/stub2?tell_me=thursday" >
    <input type="submit" value = "Submit no JS">
</form>
</body>

Вот приложение.yaml:

application: fsndp4-tic-tac-toe-01
version: 1
runtime: python27
threadsafe: true
api_version: 1

handlers:
# Static assets
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico
- url: /js
  static_dir: static/js
- url: /css
  static_dir: static/css
- url: /images
  static_dir: static/images

- url: /
  static_files: templates/index.html
  upload: templates/index\.html
  secure: always

# Endpoints handler
- url: /_ah/spi/.*
  script: tictactoe_api.APPLICATION
  http_headers:
    Access-Control-Allow-Origins: *

libraries:
- name: pycrypto
  version: latest

- name: endpoints
  version: 1.0

Вот как выглядит обработанный HTML в Chrome

Визуализированный HTML

Вот ответ, когда все работает; если вы введете «Ветчину и яйца» в текстовый ввод:

{
 "tell_me": "Ham and Eggs"
}

Надеюсь, это немного понятнее, чем грязь... Заранее спасибо...


Ответы:


1

Спать на вещах помогает... Один из ответов на второй вопрос - переместить ввод текста за пределы формы. Вот новый HTML:

<body>
        <script>
            function do_it() {
                var form1 = document.getElementById('f1');
                var input1 = document.getElementById("tell_me");
                var data1 = input1.value;
                var data2 = "?tell_me=" + data1 ;
                var url1 = "http://localhost:16080/_ah/api/tictactoe/v1/stub2";
                console.log("Going to: " + url1 + data2);
                form1.method = "POST";
                form1.action = url1 + data2;
                // form1.removeChild(input1)
                form1.submit()
                return false;
            }
        </script>
        <!--
        Move tell_me text input out of the form so it does not
        need to be removed prior to submitting the form.
        Formatting can be solved with an HTML table later
         -->

        <input type='text' name = 'tell_me' id = 'tell_me'>

        <form onsubmit="do_it();"
              name = f1
              id = f1>
            <input type='submit' value = "Submit -w- JS">
        </form>


        <form method="POST"
                action = "http://localhost:16080/_ah/api/tictactoe/v1/stub2?tell_me=thursday" >
            <input type="submit" value = "Submit no JS">
        </form>
</body>

Обратите внимание, что я просто закомментировал form1.removeChild(input1) для ясности между двумя примерами.

Это достаточно очищает вещи для того, что я пытался сделать. Я рассматриваю этот ответ. Любая дополнительная информация о том, как работает API конечной точки, всегда приветствуется.

19.07.2016
Новые материалы

Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..