为什么AJAX向我显示了一个JSON文件，我已经通过flask中的view函数返回了这个文件

Question

我使用flask作为后端，我有一个按钮，通过使用AJAX，我在flask中调用一个视图函数。我已经创建了一个子文件来存储一些表单数据。

当我填写表单并按下按钮时，我的函数upload会被调用，它会创建结果并将其推送到JSON文件中。我将返回这个JSON文件，以便可以将其动态显示给前端。但我得到的不是数据，而是整个JSON文件。

上传视图调用api/test来生成消息，并将这些消息添加到data.json文件中

我在另一个项目中使用过ajax和类似的函数，但从未出现过这个错误。

这是我的表单和ajax代码。

$(document).ready(function () {
$('#upload').on('click', 'button', function () {

let photos_fd = new FormData()
var img = document.getElementById('photos').files.length;
if (img == 0) {
$('#msg').html('<span style="color:red">Select at least one file</span>');
return;
}
console.log(document.getElementById('photos').files[0])
for (var x = 0; x < img; x++) {
photos_fd.append("photos[]", document.getElementById('photos').files[x]);
}

let formData = new FormData()
formData.append("email", $('#email').val());
formData.append("label", $('#label').val());
console.log("you submit the form", $('#email').val(), $('#label').val() );
$.ajax({
url: " {{url_for('upload')}} ",
dataType: 'json',
cache: false,
async: true,
contentType: false,
processData: false,
data: formData,
photos : photos_fd,
type: '',
success: function(data) {
console.log("xxxxxxx");
alert(data.keys());
// console.log("",response);
},
error: function(response) {
$("#msg").text(response.response); // display error response
}
});
});
});    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact-clean">
<form method="post" action="{{ url_for('upload') }}" enctype="multipart/form-data">
<h2 class="text-center">Upload Image</h2>
<div class="form-group">
<input class="form-control is-invalid" type="email"  id='email' name="email" placeholder="Email">
</div>
<div class="form-group">
<input class="form-control" type="text" id="label" name="label" placeholder="Image Name">
</div>

<div class="form-group">
<input type="file" id="photos" name="photos[]">
</div>
<div class="form-group">
<button id ="upload" class="btn btn-primary" type="submit">UPLOAD</button>
</div>
</form>
</div>

烧瓶视图上传

@app.route('/', methods=['POST'])
def upload():
if 'photos[]' in request.files:
photos = request.files.getlist('photos[]')
photo = photos[0]
label = request.form["label"]
email = request.form["email"]
img_formate = "." + str(photo.filename).split(".")[-1] 
image = label + img_formate
photo.save(os.path.join(app.config['UPLOAD_FOLDER'], image))
result = {
label:
{
'image': image,
'email': email,
'caption': json.loads(response.text)['message']
}
}
with open('templates/data.json') as f:
data = json.load(f)
data.update(result)
with open('templates/data.json', 'w') as f:
json.dump(data, f,indent=4)
if photo.filename != '':
return data

其他：return重定向(url_fo('index'((

我点击按钮就会得到这样的JSON文件。我希望返回的JSON对象被打印到表单下面的屏幕上，但返回的数据被直接打印到浏览器窗口，浏览器窗口不维护"index.html"(它有导航条和表单(的结构。我收到的回复是：

{
"img1": 
{
"caption": " a man holding a dog in a white shirt ", 
"email": "[e-mail]", 
"image": "img1.jpg"
}
}

Answer 1

在这里分析您的代码后，我发现了错误：1.在脚本的第二行，应该是#form，而不是#Upload2.您在Ajax Call 中没有提到类型

给定以下是修改后的javascript代码

$(document).ready(function () {
$('#form').on('submit', function (e) {
e.preventDefault();
let photos_fd = new FormData()
var img = document.getElementById('photos').files.length;
if (img == 0) {
$('#msg').html('<span style="color:red">Select at least one file</span>');
return;
}
console.log(document.getElementById('photos').files[0])
for (var x = 0; x < img; x++) {
photos_fd.append("photos[]", document.getElementById('photos').files[x]);
}

let formData = new FormData()
formData.append("email", $('#email').val());
formData.append("label", $('#label').val());
console.log("you submit the form", $('#email').val(), $('#label').val() );
$.ajax({
url: " {{url_for('upload')}} ",
dataType: 'json',
cache: false,
async: true,
contentType: false,
processData: false,
data: formData,
photos : photos_fd,
type: 'POST', 
success: function(data) {
console.log("xxxxxxx");
alert(data.keys());
// console.log("",response);
},
error: function(response) {
$("#msg").text(response.response); // display error response
}
});
});
});