フォームを介してフラスコにデータを投稿すると400の不正リクエストが発生する

Question

私はフロントエンドからデータを投稿しようとしていますが、フラスコのアプリは400の不正なリクエストを投げています。しかし、もし私がCurlコールを使って同じことをしているのであれば、うまくいくようです。私はフォームに何が欠けているのかわかりません。

次は、サーバー側では、私のフォームコード

<script> 
function sub() { 
    console.log('sub function'); 
    $("#fquery").submit(); 
} 
</script> 
<form id="form1" action="/final" method="post"> 
<input id='query' type="text"> 
    <button type="submit" onClick='sub()'>Submit &raquo;</button> 
</form> 

です：

@app.route('/final',methods=['POST','GET']) 
def message(): 
    if request.method == 'POST': 
     app.logger.debug(" entered message function"+ request.form['query']) 
     q = request.form['query'] 
    return render_template('final.html',query=q,result="Core_Table Output") 

サーバ側は私には罰金です。私はカール要求

curl http://localhost:8000/final -d "query=select starct st blah blah" -X POST -v 
* Trying 127.0.0.1... connected 
> POST /gc HTTP/1.1 
> User-Agent: curl/7.22.0 (i686-pc-linux-gnu) libcurl/7.22.0 OpenSSL/1.0.1 zlib/1.2.3.4 libidn/1.23 librtmp/2.3 
> Host: localhost:8000 
> Accept: */* 
> Content-Length: 41 
> Content-Type: application/x-www-form-urlencoded 
> 
* upload completely sent off: 41out of 41 bytes 
* HTTP 1.0, assume close after body 
< HTTP/1.0 200 OK 
< Content-Type: text/html; charset=utf-8 
< Content-Length: 1961 
< Server: Werkzeug/0.9.4 Python/2.7.3 
< Date: Thu, 24 Oct 2013 23:33:12 GMT 

Answer 1

ああのための応答を取得しておりますので、私はそれを参照してくださいと思う：あなただけinput要素のidではなくnameを設定します。しかし、nameは、サーバーに送信されるフォームデータで使用されます。これによりrequest.form['query']にKeyErrorが発生し、400エラーが発生します。

Answer 2

@Robin Krahlが述べたこと以外に、enctype="multipart/form-data"もフォームに追加する必要があります。したがって、コードは次のようになります。

<form id="form1" action="/final" method="post" enctype="multipart/form-data"> 
    <input id='query' type="text"> 
    <button type="submit" onClick='sub()'>Submit &raquo;</button> 
</form>"