Question

我有一个包含文本属性和图像属性的JSON文件。我想使用JavaScript / AJAX一起显示这两个。我已设法显示文本和图像，但在单独的功能。我希望能够显示文本，然后跟随图像。

我的JSON文件（phones.json）

let ud = NSUserDefaults.standardUserDefaults()
ud.synchronize()

var mySettingValue = ud.stringForKey("mySettingKey")
if mySettingValue == nil {
    mySettingValue = "http://www.example.com"
}

显示文字的代码......

[
      { "name":"Samsung Galaxy S6 Edge+",
        "year":2015,
        "manufacture":"Samsung",
        "description":"Samsung Galaxy S6 Edge+ is an Android smartphone manufactured and marketed by Samsung Electronics. The S6 line serves as a successor to the Galaxy S5. The S6 and S6   Edge smartphones were officially unveiled in the first Samsung Unpacked 2015 event at Mobile World Congress on 1 March 2015, while the bigger S6 Edge+ was officially unveiled together with the Samsung Galaxy Note 5 in the second Samsung Unpacked 2015 event at New York on 13 August 2015. Alongside the S6, Samsung also unveiled the S6 Edge (and later on the bigger S6 Edge+), a variant whose screen is wrapped along the sides of the device; the curvature is usable for several additional features. The Galaxy S6 and S6 Edge were released on 10 April 2015 in 20 countries while the S6 Edge+ was released on 21 August 2015 in 20 countries.",
        "lat": 53.645792,
        "lng":  -1.785035,
        "imgPath": "img/s6Edge+.jpg"},

      { "name":"Samsung Galaxy S6 Edge",
        "year":2015,
        "manufacture":"Samsung",
        "description":"Samsung Galaxy S6 Edge is an Android smartphone manufactured and marketed by Samsung Electronics. The S6 line serves as a successor to the Galaxy S5. The S6 and S6 Edge smartphones were officially unveiled in the first Samsung Unpacked 2015 event at Mobile World Congress on 1 March 2015, while the bigger S6 Edge+ was officially unveiled together with the Samsung Galaxy Note 5 in the second Samsung Unpacked 2015 event at New York on 13 August 2015. Alongside the S6, Samsung also unveiled the S6 Edge (and later on the bigger S6 Edge+), a variant whose screen is wrapped along the sides of the device; the curvature is usable for several additional features. The Galaxy S6 and S6 Edge were released on 10 April 2015 in 20 countries while the S6 Edge+ was released on 21 August 2015 in 20 countries.",
        "imgPath": "img/s6Edge+.jpg"},
]

显示图像的代码......

window.onload = function()
{
function ajax_get_json(){
var results = document.getElementById("results");
var hr = new XMLHttpRequest();
hr.open("GET", "js/phones.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var data = JSON.parse(hr.responseText);
        results.innerHTML = "";
        for(var obj in data){
        results.innerHTML += "<h3>"+data[obj].name+" was first introduced in "+data[obj].year+" and was unvield by "+data[obj].manufacture+ "</h3><br><p>" +data[obj].description+ +""+"</p><hr />";

        }
    }
}
hr.send(null);
results.innerHTML = "requesting...";
}

ajax_get_json();
}

Answer 1

合并你最终会得到的这两个函数：

window.onload = function()
{
    function ajax_get_json(){
        var results = document.getElementById("results");
        var hr = new XMLHttpRequest();
        hr.open("GET", "js/phones.json", true);
        hr.setRequestHeader("Content-type", "application/json", true);
        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                var data = JSON.parse(hr.responseText);
                results.innerHTML = "";
                var imgList= "";

                for(var obj in data) {
                    results.innerHTML += "<h3>"+data[obj].name+" was first introduced in "+data[obj].year+" and was unvield by "+data[obj].manufacture+ "</h3><br><p>" +data[obj].description+ +""+"</p><hr />";

                    imgList += '<img class="img-responsive" src= "' + data[obj].imgPath + '">';
                }

                $('#results').append(imgList);
            }
        }
        hr.send(null);
        results.innerHTML = "requesting...";
    }

    ajax_get_json();
}

如何显示JSON文件中的图像和文本

1 个答案: