Javascript 为什么我需要删除child表单输入来调用自定义GAE API_Javascript_Python_Html_Forms_Google App Engine

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

javascript python html forms google-app-engine

Javascript 为什么我需要删除child表单输入来调用自定义GAE API,javascript,python,html,forms,google-app-engine,Javascript,Python,Html,Forms,Google App Engine,我所要做的就是将一个字符串传递给一个愚蠢的简单GAE端点API，该API只返回我发送的内容。出于学习目的，我想在不使用Google Javascript库或Jinja、Flask、Webapp2等的情况下使用它。是的，我知道API Explorer。那里的请求显然很简单，这让我想知道如何在不使用API资源管理器的情况下完成它下面的代码不是很好，只是用于检查API。（是的，我从Google Tac-Tac-Toe示例开始）在我的Javascript中，您将看到form1.removeChild

我所要做的就是将一个字符串传递给一个愚蠢的简单GAE端点API，该API只返回我发送的内容。出于学习目的，我想在不使用Google Javascript库或Jinja、Flask、Webapp2等的情况下使用它。是的，我知道API Explorer。那里的请求显然很简单，这让我想知道如何在不使用API资源管理器的情况下完成它

下面的代码不是很好，只是用于检查API。（是的，我从Google Tac-Tac-Toe示例开始）

在我的Javascript中，您将看到

form1.removeChild（input1）

。尝试使用

中的值构建查询字符串后；我发现，从表单中删除子元素（

）可以使它像基本静态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开发者工具上的请求头，我发现两个表单的请求头是相同的。区别在于第一个有表单数据，第二个没有。两者都有一个查询字符串

我有两个问题： 有没有一种方法可以设置端点API来处理没有GAE JS库的表单数据

仅仅使用JS，还有其他更干净的方法吗？也就是说，表单数据不需要删除

我明白了，GAE Javascript库是正确的选择。再说一次，我只是想确保我理解这里的基本知识

下面是API（Python）：

以下是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>

下面是在Chrome中呈现的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>


函数do_it（）{
var form1=document.getElementById（'f1'）；
var input1=document.getElementById（“告诉我”）；
var data1=输入1.0的值；
var data2=“？tell_me=“+data1；
变量url1=”http://localhost:16080/_ah/api/tictactoe/v1/stub2";
log（“转到：+url1+data2”）；
form1.method=“POST”；
form1.action=url1+data2；
//表格1.removeChild（输入1）
表格1.提交（）
返回false；
}

请注意，我刚刚注释掉了

form1.removeChild（input1）

，以明确两个示例之间的区别

这就足够让我做的事情变得干净了。我正在考虑回答这个问题。当然，对于端点API如何工作的任何附加信息，我们都非常感谢。

熟睡有助于。。。第二个问题的一个答案是将文本输入移到表单之外。以下是新的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>


函数do_it（）{
var form1=document.getElementById（'f1'）；
var input1=document.getElementById（“告诉我”）；
var data1=输入1.0的值；
var data2=“？tell_me=“+data1；
变量url1=”http://localhost:16080/_ah/api/tictactoe/v1/stub2";
log（“转到：+url1+data2”）；
form1.method=“POST”；
form1.action=url1+data2；
//表格1.removeChild（输入1）
表格1.提交（）
返回false；
}

请注意，我刚刚注释掉了

form1.removeChild（input1）

，以明确两个示例之间的区别

这就足够让我做的事情变得干净了。我正在考虑回答这个问题。当然，对于端点API如何工作的任何附加信息，我们都将不胜感激

<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>