Question

我正在尝试返回一些数据并将其显示在我的页面上......但不确定这里要做什么。我确实得到一个对象，但不确定如何在页面上迭代它。

  <input id="btnSubmit" type="submit" value="Release"/>

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "http://ebird.org/ws1.1/data/notable/geo/recent?lng=-110.926479&lat=32.221743&dist=2&back=5&maxResults=500&detail=simple&locale=en_US&fmt=json",
            success: function (result) {
                $("#div1").html(result);
                alert("success" + result);
            },
            error: function () {
                alert("Local error callback.");
            },
            complete: function () {
                alert("Local completion callback.");
            }
        });
    }); 

});

<div id="div1"></div>

非常感谢任何帮助！

Answer 1

那么，您收到了JSON响应请求。你如何展示它，永远取决于你。 JSON是数据，而不是布局或显示信息。我建议像knockout.js这样的MVVM框架。（永远不要和Angulrajs一起去，你会迷路）。您可以在大约5-6行代码中“显示”您的结果。

Answer 2

使用每个循环：

var result =[{"obsDt":"2016-02-23 10:15","lng":-110.9235907,"locName":"Reid Park","obsValid":true,"comName":"Summer Tanager","obsReviewed":true,"sciName":"Piranga rubra","locationPrivate":false,"howMany":1,"lat":32.2102866,"locID":"L227274"}]

$.each(result,function(i,v){
  alert(v.comName)
})

Answer 3

您可以按对象名称引用数组，如下所示。

 <input id="btnSubmit" type="submit" value="Release"/>  


$(document).ready(function() {
    $("#btnSubmit").click(function(){
        alert("button");
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "http://ebird.org/ws1.1/data/notable/geo/recent?lng=-110.926479&lat=32.221743&dist=2&back=5&maxResults=500&detail=simple&locale=en_US&fmt=json",
            success: function (result) {

            console.log(result);
            console.log(result[0].obsDt);
            console.log(result[0].lat);
            console.log(result[0].lng);
            console.log(result[0].comName);

            $("#div1").html(result[0].obsDt);

                alert("success" + result);
            },
            error: function () {
                alert("Local error callback.");
            },
            complete: function () {
                alert("Local completion callback.");
            }
        });
    }); 

});

<div id="div1"></div>

使用jQuery显示来自rest API的数据

3 个答案: