如何使用Ajax将JSON加载到网页

时间:2018-12-31 11:05:38

标签: javascript jquery ajax

我正在尝试从API获取JSON数据并将其添加到HTML选择选项

<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
    <Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>

,但代码未显示任何内容。 以下是api提供的示例json数据

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="school"></select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    schools();
});
function schools(){
        $.ajax({
            url:"http://localhost/sms/public/api/schools",
            method:"GET"
        }).done(function(data){
            var sch;
            for (var i = 0; i < data.length; i++) {
                sch = '<option>'+ data[i].name +'</option>';
            }
            $('#school').append(sch);
        })
    }
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我不知道你的问题吗?和您的HTML代码,但尝试这样做:

docker run -t repo:tag ls -l

如果您从服务器接收JSON格式的数据,则可以使用$.ajax({ url:"http://localhost/sms/public/api/schools", method:"GET" }).done(function(data){ var sch, i, json; json = JSON.parse(data); for (i = 0; i < json.length; i++) { $('#school').append('<option>'+ json[i].name +'</option>'); } }); 将JSON格式转换为本地JavaScript对象。