Jquery Форма отправки не публикует json должным образом в Flask

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 фрагмент для отправки формы, как показано ниже

$("#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 - это маршрут в моем flask приложении 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 ниже, я получаю request.get_ json () правильный json формат.

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

           })

Answer 2

Вам не нужно конвертировать ваши данные в json при отправке через ajax. Вместо этого передайте объект непосредственно в аргумент данных как полный объект, и пусть jquery сделает все остальное.