Question

我正在用Udacity上一门课程，以使用Python开发Web应用程序。目前，它已引入JSON来处理请求表单。我已经写了不止一次的课程说明中的代码，并且我99％正确地编写了所有内容。但是，当我尝试使用请求表单时，总是出现错误“ 405方法不允许”。网上搜索无济于事，我找不到解决方案。在这里遵循应该运行的python路线：

 @app.route('/todos/create', methods=['POST'])
 def create_todo():
    description = request.get_json()['description']
    todo = Todo(description=description)
    db.session.add(todo)
    db.session.commit()
    return jsonify({
        'description': todo.description
    })

这里是HTML脚本

 <script>
            document.getElementById('form').onsubmit = function(e){
                e.preventDefault(); 
                fetch('/todos/create', {
                    method: 'POST',
                    body: JSON.stringify({
                        'description': document.getElementById('description').value
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }) 
                .then(function(response){
                    return response.json(); 
                })
                .then(function(jsonResponse){
                    console.log(jsonResponse);
                    const lil_item = document.createElement('LI'); 
                    lil_item.innerHTML = jsonResponse['description'];
                    document.getElementById('todos').appendChild(lil_item); 
                }); 
            }
        </script>

我希望有人能帮助我，我真的不知道该如何解决。预先感谢。

编辑-插入完整的HTML代码：

<html>
    <head>
        <title>
            Todo App
        </title>
    </head>
    <body>
        <form method="post" >
            <input type="text" id="description" name="description" />
            <input type="submit" name="Create" />
        </form>
        <ul id="todos">
            {% for d in data %}
            <li>  {{d.description}}  </li>
            {% endfor %}
        </ul>
        <script>
            document.getElementById('form').onsubmit = function(e){
                e.preventDefault(); 
                fetch('/todos/create', {
                    method: 'POST',
                    body: JSON.stringify({
                        'description': document.getElementById('description').value
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                        
                    }
                }) 
                .then(function(response){
                    return response.json(); 
                })
                .then(function(jsonResponse){
                    console.log(jsonResponse);
                    const lil_item = document.createElement('LI'); 
                    lil_item.innerHTML = jsonResponse['description'];
                    document.getElementById('todos').appendChild(lil_item); 
                }); 
            }
        </script>
    </body>
</html>

Answer 1

在您的html文档中，表单对象没有ID。在javascript代码中，您正在寻找id =“ form”的对象上的Submit事件，但是这样的元素不存在。

所以您只需要更改：

<form id="myForm" method="post">
    <input type="text" id="description" name="description" />
    <input type="submit" name="Create" />
</form>

，然后在JS中：

document.getElementById('myForm').onsubmit = ...

405不允许使用方法-JSON-所请求的URL不允许使用该方法

1 个答案: