$.ajax post 请求烧瓶上的错误请求 (400)

Question

对于我在 Flask 中的 Web 应用程序，我需要在一次提交中发送两个 post 请求：

第一个是发送我的表单数据，这里一切正常。

但是有一个字段不能通过表单发送（Tag-Field）。所以我想通过 javascript 获取这个字段的标签，然后用 $.ajax post 请求将它发送到我的视图。每次单击提交按钮时，我都会收到 $.ajax post 请求的错误请求 (400) 错误。另一个 post 请求工作正常。

这是我的 javascript:

script language="javascript">
    function getTagList() {
        var tagArray = new Array();
        tagArray = $('#my-tag-list5').tags().getTags();
        var tags = tagArray.toString();
        console.log(tags);
        request = $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: "/dozent/fragenEingeben",
            data: JSON.stringify(tags),
            success: function (data) {
                console.log(data.tags);
            },
        });
    }
</script>

调用脚本和表单提交的按钮如下所示：

<li class="next"><button type="submit" class="btn btn-success next btnPager btnPagerRight" name="createAndActivate" value="createAndActivate" onclick="getTagList();">Speichern</br><i>~ und freigeben ~</i></button></li>

当我在 Flask 中打印 request.form 时，我在 Python 控制台中得到了这个：

ImmutableMultiDict([])
127.0.0.1 - - [12/Jan/2015 15:25:09] "POST /dozent/fragenEingeben HTTP/1.1" 400 -
ImmutableMultiDict([('createAndActivate', u'createAndActivate'), ('option2[]', u'answer1'), ('option2[]', u'answer2'), ('option2[]', u'answer3'), ('option2[]', u''), ('option[]', u'answer'), ('option[]', u''), ('question', u'Question'), ('time', u'10s')])
127.0.0.1 - - [12/Jan/2015 15:25:10] "POST /dozent/fragenEingeben HTTP/1.1" 302 -

这是我的网络浏览器中的错误：

POST http://127.0.0.1:5000/dozent/fragenEingeben 400 (BAD REQUEST)      jquery.min.js:4
  send                                                                  jquery.min.js:4 
  m.extend.ajax                                                         jquery.min.js:4
  getTagList                                                            fragenEingeben:240
  onclick                                                               fragenEingeben:227

这是我的烧瓶视图：

#create question
@app.route('/dozent/fragenEingeben', methods=['GET','POST'])
@login_required
def fragenEingeben():
    if request.method == 'POST':
        print request.form
        #If button "Speichern und freigeben" was clicked do the following
        if request.form['createAndActivate'] == 'createAndActivate':
            tags = request.json['tags']
            #Get ID of signed in lecturer
            lecturer = getLecturerID((session['email'],))
            #Write all in db
            createAndActivateQuestion(request.form['question'],"tag",lecturer,request.form['time'],request.form.getlist('option[]'),request.form.getlist('option2[]'))
            flash('Frage erfolgreich erstellt und aktiviert.')
            return jsonify(tags=tags)
        #If button "Speichern und nicht freigeben" was clicked do the following
        elif request.form['createQuestion'] == 'createQuestion':
            #Get ID of signed in lecturer
            lecturer = getLecturerID((session['email'],))
            #Write all in db
            createQuestion(request.form['question'],"tag",lecturer,request.form['time'],request.form.getlist('option[]'),request.form.getlist('option2[]'))
            flash('Frage erfolgreich erstellt.')
            return redirect(url_for('fragenEingeben'))
        else:
            return redirect(url_for('statistik'))
    else:
        pass
    return render_template('dozent/fragenEingeben.html')

当我想获取视图中的数据时，出现以下错误：

TypeError: 'NoneType' object has no attribute '__getitem__'

谁能解释为什么我收到第一个 post 请求的错误请求？

Answer 1

AJAX请求单独执行，在表单POST编辑之前。发送 AJAX 调用后，您不能使用 request.form，因为该数据尚未发送。它是在 AJAX 请求之后的单独请求中发送的。

如果您要在表单 POST 中包含标签，请将它们粘贴在 <input type="hidden"> 字段中，而不是使用 AJAX。 AJAX 用于带外请求，而不是用于向现有表单添加数据 POST。

因此，不要使用 $.ajax，而是将额外的表单字段添加到您的表单中：

<input type="hidden" name="tag_list" id="tag_list" value="" />

并在您的提交事件处理程序中更新该字段：

tagArray = $('#my-tag-list5').tags().getTags();
$('#tag_list').val(JSON.stringify(tagArray));

并在 Flask 视图中提取这些标签：

import json

tags = json.loads(request.form['tag_list']))

$.ajax post 请求烧瓶上的错误请求 (400)

Bad Request (400) on $.ajax post request flask

forms

ajax

post

httprequest

flask