Handle Json Response after submitting a file to a server - html

Question

hope you are doing good. I am facing a bit of problem after submitting a file to my server (currently local) and then processing the json response once the file is uploaded. This is quite similar to what I'm looking for, and it is working fine, but on submitting the file, it redirects to the json response page.
<script>
$("#uploadForm").submit(function(event) {
var formData = new FormData();
formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
event.stopPropagation();
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data) {
alert(data);
//grabe the json response
//check if the form is successfully submitted
// if yes then send the name of pdf file
//grab another json response
}
});
return false;
});
</script>
and this is the form
<form id="uploadForm" action="http://127.0.0.1:5000/file/file-upload" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1">
<div class="inputFileCustom">
<input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
<label for="uploadFiles">
<div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
Choose a file
</div>
</label>
</div>
<input type="submit" value="Upload PDF" class="btn btn-primary" />
</form>
on submitting the form, the form goes to the file-upload page, but I want to handle the Json in the same page. This is the Json response on successful file submit
{
"message": "File successfully uploaded"
}
And then the next response which will be received after sending the filename to the server will be like this
{
"status": "success",
"Section1": {
"essentialSections": [
"CAREER OBJECTIVE",
"PROFESSIONAL EXPERIENCE",
"EDUCATION",
"ADDITIONAL SKILLS"
],
"sectionFontSize": {
"CAREER OBJECTIVE": "12",
"PROFESSIONAL EXPERIENCE": "12",
"EDUCATION": "12",
"ADDITIONAL SKILLS": "12"
},
"spaceBetweenSections": {
"CAREER OBJECTIVE": "8",
"PROFESSIONAL EXPERIENCE": "4",
"EDUCATION": "1",
"ADDITIONAL SKILLS": "4"
}
},
"Section2":{
"totalSpaces": 347,
"totalNewLines": 90,
"totalCharacter": 1674
},
"Section3":{
"totalNoPages": 1,
"pdfContainImage": false,
"textColorInPdf": "Black"
},
"Section4":{
"allTextSizeAndStyle": {
"all_text_font_size_same": "False",
"all_text_font_type_same": "False"
},
"headerFooterSpace": {
"Header Space Count": "4",
"Footer Space Count": "5"
}
}
}
I just want to know how I can catch the json response in the same page, and then send some more info to the server and catch another json response. Thanks