使用 ajax 和 jQuery 传递表单和文件数据的问题

Question

我想将一些表单数据和文件从表单传递到烧瓶应用程序。但我不能用ajax传递它。我猜数据有问题。我已经在 ajax 中发送数据，但在烧瓶应用程序中我没有得到任何字符串或文件。

这是我的html代码：

<form id="user_vote" enctype = "multipart/form-data">
        <br>
        <br>
        <div class="row">
            <label class="col-sm-2">Name:</label>
            <div class="col-sm-10">
                <input type="text" name="name" id="name" rows="2" class="form-control" required>
            </div>
        </div>

        <div class="row">
            <label class="col-sm-2">National ID Image:</label>
            <div class="col-sm-10">
                <input type="file" name="national_id_image" id="national_id_image" rows="2" class="form-control" required>
            </div>
        </div>
        <br>

        <div class="row">
            <label class="col-sm-2">Vote:</label>
            <div class="col-sm-10">
                <input type="number" name="vote" id="vote" rows="2" class="form-control" required>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12 text-center">
                <input type="button" id="submit_vote" class="btn btn-primary btn-lg"
                       value="Authenticate and Encrypt Vote">
            </div>
        </div>

这是我的 ajax 代码::

      $(function(){

        var form = $('#user_vote')[0];
        var data = new FormData(form);

        //console.log('hello');
        //console.log(document.getElementById('submit_vote'));

        $('#submit_vote').click(function(){
          //console.log(data);
          //console.log('hello');

          $.ajax({
            url: '/encrypt/vote',
            type: "POST",
            dataType: 'json',
            enctype: 'multipart/form-data',
            data: data,
            contentType: false,
            cache: false,
            processData:false,
            success: function(response){
              //console.log("SUCCESS : ", data);
              document.getElementById("encrypted_vote").innerHTML = response['encrypted_vote'];
              document.getElementById("public_key").innerHTML = response['signature'];
              document.getElementById("warning").style.display = "block";
            },
            error: function(error){
              console.log(error);
            }
          });
        });
      })

烧瓶代码::

app.route('/encrypt/vote', methods=['POST'])
def encrypt_vote():
    print('test')
    name = request.form['name']
    print(name)
    family_name = request.form['family_name']
    birth_date = request.form['birth_date']
    national_id = request.form['national_id']
    file = request.files['national_id_image']
    filename = str(name) + str(family_name)# + secure_filename(file.filename)
    #file.save(os.path.join(app.root_path, UPLOAD_FOLDER, filename))
    #voter_national_cart_hash = get_digest('files/uploads/' + filename)

    print('test vote type')
    print(request.form['vote'])
    vote = int(float(request.form['vote']))

    pk = int(float(request.form['public_key']))


    encrypted_vote = encrypt(pk, vote)

    response = {
        'encrypted_vote': str(encrypted_vote)
    }

    return jsonify(response), 200

谁能帮帮我？？ 谢谢

Answer 1

您似乎设置了enctype: 'multipart/form-data'，这是$.ajax() 方法的不存在 属性。您应该更正此错误并简化请求：

$.ajax({
    type: "POST",
    data: data,
    url: '/encrypt/vote',           
    cache: false,
    contentType: false,
    processData: false,
    success: function(response) {
        /*The rest of your code*/
    },
    error: function(error){
         console.log(error);
    }
});

无需设置dataType，默认为Intelligent Guess（xml、json、script或html）。阅读more here。

编辑：确保您在url 中使用正确的完整路径，尽量不要使用相对地址，而是使用https://www.your-server.com/encrypt/vote。