Ajax Success Wont Trigger - html

Question

On submitting a form I wanted to provide the user with feedback that the ajax was executed successfully. My ajax is as follows:
$(function() {
$('#submit').click(function (e) {
var url = "{{ url_for('handle_data') }}"; // send the form data here.
var form_data = new FormData($('#mainform')[0]);
$.ajax({
type: "POST",
url: url,
data: form_data, // serializes the form's elements.
success: function () {
alert('success!!');
}
});
e.preventDefault(); // block the traditional submission of the form.
});
// Inject our CSRF token into our AJAX request.
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", "{{ form.csrf_token._value() }}")
}
}
});
});
And on the backend my flask is:
#app.route('/handle_date', methods=['GET', 'POST'])
def handle_data():
"""
:return:
"""
print("hi there")
return ""
I can never get that success alert message to fire.

Answer 1

The server is not receiving JSON, it’s a FormData. And for jQuery to send a FormData, it needs
$.ajax({
type: "POST",
url: url,
data: formData,
// these three additional parameters
processData: false,
contentType: false,
dataType: "json"
})
The second edit i did was at the backend, when returning a response from flask I had to wrap it under jsonify for the ajax success to trigger