Question

我正在创建一个使用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

Answer 1

您只返回第一个数组（$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>

Answer 2

我的错误删除了另一个答案尝试将你的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);

Answer 3

试试这个

<?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);

?>

问题在于，您只打印第一个数组，这就是为什么您只看到它打印第一行的原因。

Answer 4

如果你试图在网页上显示或类似的东西，你可以自己做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

如何使用AJAX显示JSON信息

4 个答案:

编辑：