Jquery 表单提交未在 Flask 中正确发布 json

Question

我对 Flask 和 JQuery 还很陌生。所以如果问题是原始的，请原谅。

我有如下表格

<form id="departmentForm">
    <div class=col-md-12>
        <div class="card">
            <div class="card-header">
                <strong>Add New Department</strong>
            </div>
            <br/>
            <div id="successAlert" class="alert alert-success" role="alert" style="display:none;"></div>
            <div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"></div>
            <div class="card-body">
                <div class="row">
                    <div class="form-group col-sm-8">
                        <label for="name">Name</label>
                        <input class="form-control" name="depName" id="name" type="text" maxlength="50"  pattern="[a-zA-Z0-9._\s]+" placeholder="Enter department name" required>
                    </div>
                    <div class="form-group col-sm-4">
                        <label for="prefix">Prefix</label>
                        <input class="form-control" name="depPreFix" id="prefix" type="text" maxlength="1"  pattern="[a-zA-Z0-9._\s]+" placeholder="Enter an alphabet/number for prefix" required>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-sm btn-primary" id="submit" type="submits">Submit</button>
                <button class="btn btn-sm btn-primary" id="reset" type="reset" value="Reset">Reset</button>
            </div>           
        </div>
    </div>
</form>

和 Jquery sn-p 发布表单如下

$("#departmentForm").submit(function (e) {
            alert("Hi");

           e.preventDefault();
           var data = {};
           var Form = this;
           $.each(this.elements,function(i,v){
               var input = $(v);
               data[input.attr("name")]=input.val();
               delete data["undefined"];
           })

           alert(JSON.stringify(data));
           $.ajax({
               type: 'POST',
               data : JSON.stringify(data),
               url: '/add_dep'

           })
           .done(function(data){
               if(data.error){
                    $('#errorAlert').text(data.error).show();
                    $('#successAlert').hide();
               }
               else{
                    $('#successAlert').text(data.name).show();
                    $('#errorAlert').hide();
               }
           });
        });

/add_dep 是我的烧瓶应用程序 bueprint 中的路由，如下所示

    @menuOps_bp.route('/add_dep',methods=['POST'])
    def add_dep():
        print(request.form)
        depName = request.form.get('depName')
        depPrefix = request.form.get('depPreFix')
        if Department.query.filter_by(dep_name=depName).first() is None:
            return jsonify({'data' : depName + "Is not present"})
        else:
            return jsonify({'error' : depName + "Is already added"})

flask 中给出的以下代码为 Null

depName = request.form.get('depName')

作为请求表单来作为

       ImmutableMultiDict([('{"depName":"3242","depPreFix":"s"}', '')])

请帮助我。不确定，我哪里出错了。 我试过了

   request.form['depName']

但没有运气。请帮忙。

Answer 1

通过 ajax 发送数据时，您不需要将数据转换为 json。而是将对象作为完整对象直接传递给 data 参数，让 jquery 完成剩下的工作。

Answer 2

通过在 ajax 调用中给出以下内容，我得到 request.get_json() 是正确的 json 格式。

 $.ajax({
               type: 'POST',
               contentType: 'application/json',
               data :JSON.stringify(data),
               dataType : 'json',
               url: '/add_dep'

           })