个人中心
gpt4 book ai didi

javascript - 为什么我需要删除Child表单输入来调用自定义GAE API

转载 作者：行者123 更新时间：2023-11-28 05:46:52 25 4
gpt4 key购买 nike

我想做的就是将一个字符串传递给一个愚蠢的简单 GAE 端点 API，它只返回我发送的内容。出于学习目的，我想在不使用 Google Javascript 库或 Jinja、Flask、Webapp2 等的情况下完成此操作。顺便说一句，是的，我了解 API Explorer。请求的明显简单性让我想知道如何在不使用 API Explorer 的情况下完成此操作。

下面的代码不是很好，它只是为了检查 API。 (是的，我从 Google Tac-Tac-Toe 示例开始)

在我的 Javascript 中你会看到 form1.removeChild(input1) 。尝试使用 <input type=text> 中的值构建查询字符串后;我发现从表单中删除子元素( <input type=text> )可以使其像基本静态 URL(这是下面 HTML 中的第二个表单元素)一样工作。

如果未删除子输入元素，我会在本地开发 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 开发人员工具上的请求 header ，我发现两种表单的 header 相同。区别在于第一个有 Form-Data 而第二个没有。两者都有一个查询字符串。

我有两个问题:有没有办法设置 Endpoints API 来处理表单数据而不需要 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>

这是 app.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

这是在 Chrome 中渲染的 HTML 的样子

Rendered HTML

这是一切正常后的响应；假设您将“火腿和鸡蛋”放入文本输入中:

{
 "tell_me": "Ham and Eggs"
}

我希望这比泥浆更清晰一点......提前致谢......

最佳答案

睡在东西上有帮助......第二个问题的一个答案是将文本输入移到表单之外。这是新的 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)。

这对于我想做的事情来说已经足够清理了。我正在考虑这个答案。当然，我们始终欢迎有关 Endpoint API 如何工作的任何其他信息。

关于javascript - 为什么我需要删除Child表单输入来调用自定义GAE API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38447406/

25 4 0
文章推荐： iphone - 巨大的核心数据快速迁移
文章推荐： javascript - 性能 css 规则与 jQuery .toggleClass
文章推荐： swift - 从多个 UICollectionVIews 内部的 UICollectionViewCell 推送一个新的 UICollectionViewController
文章推荐： html - 行中的两个 iframe 高度相同
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com