将JSON数组显示为html文件和AJAX中的可读信息

时间:2018-12-06 21:15:38

标签: javascript php jquery html ajax

所以我有一个名为index的html文件,看起来像这样。

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery-1.10.0.js">

        </script>
    </head>
    <body>
        <div>TODO write content</div>
        <script>

            $(document).ready(function () {
            alert("Runs");
            document.getElementByID('#demo').innerHTML = "Hello";
            header("Content-Type: application/json"); 
            $.get('JSON.php', function (data) {
                alert("Runs Again");
                document.getElementByID('#demo').innerHTML = data[0].Teams;
                $('<div>').html(data.Teams).appendTo('body');
                alert("Runs Again Again");
            });
        });
        </script>
    </body>
</html>

我的使用json的php文件如下所示。

$howManyToShow = 44;
$rows = array();
$count = 0;
//creates a variable that stores the sql statement that creates a new entry in the database
$command = "Select * From SportsNews;";                                                                  
//creates the statement and then executes it
$stmt = $dbh->prepare($command);
$result = $stmt->execute();
//$create = $stmt->rowCount();
if(isset($howManyToShow) and $howManyToShow > 0) {
    while($row = $stmt->fetch() and $count < $howManyToShow) {
        $rows[] = $row;
        $count++;
    }
}
else if (!isset($howManyToShow) or !$howManyToShow > 0) {
    while($row = $stmt->fetch() and $count < 10) {
        $rows[] = $row;
        $count++;
    }
}

echo json_encode($rows);

我知道当对象经过编码并返回时,它看起来像这样。

{"Teams":"Leafs, Devils","0":"Leafs, Devils","Date":"2018-12-04","1":"2018-12-04","League":"NHL","2":"NHL","Score":"2-0","3":"2-0","Winner":"Leafs","4":"Leafs"}

我不明白的是如何在html文件中显示JSON中的信息。我想我已经完成了大多数代码设置,但是我似乎找不到找到将它们组合在一起的方法。任何帮助将非常感激。现在,我只收到显示“运行”的警报!

0 个答案:

没有答案