Блог

Следующий код позволяет отправлять формы и возвращать варианты текста из Flask с помощью AJAX и jQuery:

 from flask import Flask, render_template, request, jsonify  app = Flask(__name__)  @app.route('/') def index():  return render_template('form.html')  @app.route('/process', methods=['POST']) def process():   email = request.form['email']  name = request.form['name']   if name and email:  newName = name[::-1]   return jsonify({'name' : newName})   return jsonify({'error' : 'Missing data!'})  if __name__ == '__main__':  app.run(debug=True)  

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;  lt;titlegt;AJAX Examplelt;/titlegt;   lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"gt;lt;/scriptgt;   lt;!-- Latest compiled and minified CSS --gt;  lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"gt;   lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"gt;lt;/scriptgt;   lt;script src="{{ url_for('static', filename='js/form.js') }}"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div class="container"gt;  lt;brgt;lt;brgt;lt;brgt;lt;brgt;  lt;form class="form-inline"gt;  lt;div class="form-group"gt;  lt;label class="sr-only" for="emailInput"gt;Email addresslt;/labelgt;  lt;input type="email" class="form-control" id="emailInput" placeholder="Email"gt;  lt;/divgt;  lt;div class="form-group"gt;  lt;label class="sr-only" for="nameInput"gt;Namelt;/labelgt;  lt;input type="text" class="form-control" id="nameInput" placeholder="First Name"gt;  lt;/divgt;  lt;button type="submit" class="btn btn-default"gt;Submitlt;/buttongt;  lt;/formgt;  lt;brgt;  lt;div id="successAlert" class="alert alert-success" role="alert" style="display:none;"gt;lt;/divgt;  lt;div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"gt;lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;  

 $(document).ready(function() {   $('form').on('submit', function(event) {   $.ajax({  data : {  name : $('#nameInput').val(),  email : $('#emailInput').val()  },  type : 'POST',  url : '/process'  })  .done(function(data) {   if (data.error) {  $('#errorAlert').text(data.error).show();  $('#successAlert').hide();  }  else {  $('#successAlert').text(data.name).show();  $('#errorAlert').hide();  }   });   event.preventDefault();   });  });  

But when I slightly modify the code to do the same thing with a uploaded file’s name it doesn’t work. All I have done is changed the type of form so that it takes in files and then made it so that it reverses the filename rather than the inputted text from the previous version. Do you know what I am doing wrong here?

 from flask import Flask, render_template, request, jsonify  app = Flask(__name__)  @app.route('/') def index():  return render_template('form.html')  @app.route('/process', methods=['POST']) def process():   filename = request.files['file'].filename   if filename:  newName = filename[::-1]   return jsonify({'name' : newName})   return jsonify({'error' : 'Missing data!'})  if __name__ == '__main__':  app.run(debug=True)  

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;  lt;titlegt;AJAX Examplelt;/titlegt;   lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"gt;lt;/scriptgt;   lt;!-- Latest compiled and minified CSS --gt;  lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"gt;   lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"gt;lt;/scriptgt;   lt;script src="{{ url_for('static', filename='js/form.js') }}"gt;lt;/scriptgt; lt;/headgt; lt;bodygt; lt;div class="container"gt;  lt;brgt;lt;brgt;lt;brgt;lt;brgt;  lt;form method="POST" action='/process' enctype="multipart/form-data"gt;  lt;divgt;  lt;label for="file"gt;Choose file to uploadlt;/labelgt;  lt;input type="file" id="file" name="file"gt;  lt;/divgt;  lt;divgt;  lt;button type="submit" class="btn btn-default"gt;Submitlt;/buttongt;  lt;/divgt;  lt;/formgt;  lt;brgt;  lt;div id="successAlert" class="alert alert-success" role="alert" style="display:none;"gt;lt;/divgt;  lt;div id="errorAlert" class="alert alert-danger" role="alert" style="display:none;"gt;lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;  

 $(document).ready(function() {   $('form').on('submit', function(event) {   $.ajax({  data : {    file : $('#file')  },  type : 'POST',  url : '/process'  })  .done(function(data) {   if (data.error) {  $('#errorAlert').text(data.error).show();  $('#successAlert').hide();  }  else {  $('#successAlert').text(data.name).show();  $('#errorAlert').hide();  }   });   event.preventDefault();   });  });  

Если вы используете объект типа FormData для сериализации и передачи данных формы, он должен работать.

 $(document).ready(function() {  $('form').submit(function(event) {  let formData = new FormData(event.target);  $.ajax({  data: formData,  type : 'POST',  url : '/process',  contentType: false,  processData: false  })  .done(function(data) {  if (data.error) {  $('#errorAlert').text(data.error).show();  $('#successAlert').hide();  } else {  $('#successAlert').text(data.name).show();  $('#errorAlert').hide();  }  });  event.preventDefault();  }); });