如何使用AJAX显示JSON信息 - How to display JSON information using AJAX

我正在创建一个使用AJAX显示json文件的文件。我现在的问题是它只打印第一行，我希望它打印所有4行。我尝试在json.php中的原始语句下添加另一个print语句，但这只会导致错误。

这是我的index.html文件中json的函数

function getJSON() {
        var xmlHttp = xmlHttpObjCreate();
        if (!xmlHttp) {
                alert("The browser doesn't support this action.");
                return;
        }
        xmlHttp.onload = function() {
                if (xmlHttp.status == 200) {
                        // Get Response Text
                        var response = xmlHttp.responseText;
                        // Prints the JSON string
                        console.dir(response);
                        // Get div object
                        var divObj = document.getElementById('dinoJSON');
                        // We used JSON.parse to turn the JSON string into an object
                        var responseObject = JSON.parse(response);
                        // This is our object
                        console.dir(responseObject);

                        // We can use that object like so:
                        divObj.innerHTML = responseObject.name + " lived during the " + responseObject.pet;
                }
        }
        xmlHttp.open("GET", "json.php", true);
        xmlHttp.send();
}

json.php

<?php
    // Print the json
    $result = array('name' => 'Staurikosaurus', 'pet' => 'Triassic');
    $result2 = array('name' => 'Diplodocus', 'pet' => 'Jurassic');
    $result3 = array('name' => 'Stegosaurus', 'pet' => 'Jurassic');
    $result4 = array('name' => 'Tyrannosaurus', 'pet' => 'Cretaceous');
    print json_encode($result);
?>

ajax.js

function xmlHttpObjCreate() {
 var xmlHttp;
 try
  {
    xmlHttp=new XMLHttpRequest();
  }
 catch (e)
  {
    try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 try
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 catch (e)
  {
  return false;
      }
    }
  }
  return xmlHttp;
 }

所以现在当按下按钮时，我的程序显示如下：

Staurikosaurus lived during the Triassic

我想让我的程序显示这个

Staurikosaurus lived during the Triassic 
Diplodocus lived during the Jurassic 
Stegosaurus lived during the Jurassic 
Tyrannosaurus lived during the Cretaceous

My bad删除了另一个答案，请尝试将您的json数组更改为类似的内容。

$result = array(
    array(
        "name" => "Staurikosaurus",
        "pet" => "Triassic"
    ),
    array(
        "name" => "Diplodocus",
        "pet'" => "Jurassic"
    ),
    array(
        "name" => "Stegosaurus",
        "pet'" => "Jurassic"
    ),
    array(
        "name" => "Tyrannosaurus",
        "pet'" => "Cretaceous"
    )
);
print json_encode($result);

试试这个

<?php
    // Print the json
    $result[] = array('name' => 'Staurikosaurus', 'pet' => 'Triassic');
    $result[] = array('name' => 'Diplodocus', 'pet' => 'Jurassic');
    $result[] = array('name' => 'Stegosaurus', 'pet' => 'Jurassic');
    $result[] = array('name' => 'Tyrannosaurus', 'pet' => 'Cretaceous');
    print json_encode($result);
?>

问题是你只打印第一个数组，这就是为什么你只看到它打印第一行。

您只返回第一个数组（$result），而不返回其他数组（$result2,$result3,$result4）。

我建议将每对值添加到一个数组中：

$result=array(
    array('name' => 'Staurikosaurus', 'pet' => 'Triassic'),
    array('name' => 'Diplodocus', 'pet' => 'Jurassic'),
    array('name' => 'Stegosaurus', 'pet' => 'Jurassic'),
    array('name' => 'Tyrannosaurus', 'pet' => 'Cretaceous')
);

然后输出json_encoded数组：

print json_encode($result,JSON_FORCE_OBJECT);

它应该会给你一个像这样的JSON对象：

{  
    "0":{  
        "name":"Staurikosaurus",
        "pet":"Triassic"
    },
    "1":{  
        "name":"Diplodocus",
        "pet":"Jurassic"
    },
    "2":{  
        "name":"Stegosaurus",
        "pet":"Jurassic"
    },
    "3":{  
        "name":"Tyrannosaurus",
        "pet":"Cretaceous"
    }
}

然后用JavaScript循环显示结果，类似于这样（但可以根据您的选择输出）：

for (i in response) {
    var line = document.createElement('p');
    line.innerHTML = response[i].name + ' lived during the ' + response[i].pet + ' period.'
    document.getElementById('output').appendChild(line);
}

编辑：

或者，为了更像你的代码格式，这个：

// We can use that object like so:
for (i in responseObject) {
    divObj.innerHTML += "<p>"+responseObject[i].name + " lived during the " + responseObject[i].pet + "period.</p>";
}

var responseObject = {  
    "0":{  
        "name":"Staurikosaurus",
        "pet":"Triassic"
    },
    "1":{  
        "name":"Diplodocus",
        "pet":"Jurassic"
    },
    "2":{  
        "name":"Stegosaurus",
        "pet":"Jurassic"
    },
    "3":{  
        "name":"Tyrannosaurus",
        "pet":"Cretaceous"
    }
};
// Get div object
var divObj = document.getElementById('dinoJSON');
// Loop through JSON
for (i in responseObject) {
    divObj.innerHTML += "<p>"+responseObject[i].name + " lived during the " + responseObject[i].pet + " period.</p>";
}

<div id="dinoJSON"></div>

如果你试图在网页或类似的东西上显示，你可以自己做php，然后做这样的事情。

$result = array( array( 'name' => 'Staurikosaurus', 'pet' => 'Triassic' ), array( 'name' => 'Diplodocus', 'pet' => 'Jurassic' ), array( 'name' => 'Stegosaurus', 'pet' => 'Jurassic' ), array( 'name' => 'Tyrannosaurus', 'pet' => 'Cretaceous' ) );
foreach ($result as $names){
    echo $names['name'].' lived during the '.$names['pet'].'<br />';
}

它将输出这个

Staurikosaurus lived during the Triassic
Diplodocus lived during the Jurassic
Stegosaurus lived during the Jurassic
Tyrannosaurus lived during the Cretaceous