我正在尝试使用Flask构建一个使用REST API的WebApp。
我从我的API成功恢复了我的JSON对象,但我无法在HTML UI中显示它。
考虑我正在尝试从JSON文件中打印userid,我只得到错误部分。
有人可以指出我出了什么问题:
这是我的JS文件:
$(document).ready(function() {
console.log("ready!");
$('#try-again').hide();
// on form submission ...
$('form').on('submit', function() {
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="location"]').val();
console.log(valueOne)
$.ajax({
type: "POST",
url: "/",
data : { 'first': valueOne},
success: function(result) {
if (!$.isEmptyObject({result})) {
$('input').hide();
$('#try-again').show();
$('#result').html(result.userid[0])
$(document).ready(function() {
console.log("ready!");
$('#try-again').hide();
// on form submission ...
$('form').on('submit', function() {
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="location"]').val();
console.log(valueOne)
$.ajax({
type: "POST",
url: "/",
data : { 'first': valueOne},
success: function(result) {
if (!$.isEmptyObject({result})) {
$('input').hide();
$('#try-again').show();
$('#result').html(result.userid)
$('#result').html('result.userid')
} else {
$('#result').html('Something went terribly wrong! Please try again.')
}
},
error: function(error) {
console.log(error)
}
});
});
$('#try-again').on('click', function(){
$('input').val('').show();
$('#try-again').hide();
$('#result').html('');
});
});
} else {
$('#result').html('Something went terribly wrong! Please try again.')
}
},
error: function(error) {
console.log(error)
}
});
});
$('#try-again').on('click', function(){
$('input').val('').show();
$('#try-again').hide();
$('#result').html('');
});
});
我的JSON数据:
[{"case": 2005608875,
"filepath": "/x/eng/cs-data/latx/dev/20150510_uploads/wilp/perfstat_20150415_001256/node/10.95.172.19/output.data",
"datatype": "perf8",
"perfdateend": "2015-04-15T02:15:37-04:00",
"userid": "wilp",
"filename": "perfstat_20150415_001256.zip",
"version": "v8.1 ",
"perfdate": "2015-04-15T01:14:24-04:00"}]
答案 0 :(得分:0)
这里有几个问题,但没有一个与Flask有任何关系。
检查返回的JSON对象的length
。但是,在JS对象中没有length属性,因此result.length
返回undefined
,不大于0。
由于您使用的是jQuery,因此您可以使用其isEmptyObject
函数来检查您的对象是否为空。
此外,在if语句中,您将文字字符串'result.userid'
插入HTML,而不是返回的JSON的实际用户标识值。
if (!$.isEmptyObject(result)) {
...
$('#result').html(result.userid)
}