我的ajax代码不输出JSON文件

时间:2018-03-25 17:10:58

标签: php html json ajax widget

所以我一直试图让这个工作几个小时,但我只是卡住了。

我有一个简单的留言板页面设置,我有这个代码创建一个JSON文件:

<?php
/* Konstanter för db-inställningar */
define("DBHOST", "localhost");
define("DBUSER", "guestbook");
define("DBPASS", "password");
define("DBDATABASE", "guestbook");

/* DB-anslutning */
$db = mysqli_connect(DBHOST, DBUSER, DBPASS, DBDATABASE) or die('Fel vid anslutning');


$numrows = 999; // Maxvärde
if(isset($_GET['numrows'])) {
    $numrows = intval($_GET['numrows']);
}


/* SQL-fråga */
$sql = "SELECT * FROM users LIMIT $numrows";
$result = mysqli_query($db, $sql) or die('Fel vid SQL-fråga');

/* Loopa genom resultet och spara till ny array */
$rows = mysqli_fetch_all($result, MYSQLI_ASSOC);

$json = json_encode($rows, JSON_PRETTY_PRINT);

header('content-type: application/json; charset=utf-8');
header("access-control-allow-origin: *");

echo $json;

以JSON格式输出它,然后我让这段代码尝试读取文件并将JSON的内容输出到此页面:

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
    <title>Guestbook</title>
</head>
<link rel="stylesheet" href="css/stilmall.css?<?php echo time(); ?>" type="text/css">
<body>

<nav id="mainmenu">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="login.php">Administration</a></li>
                    <li><a href="webservice.php">JSON</a></li>
                    <li><a href="ajax.htm">Webbservice</a></li>
                </ul>
            </nav>

<div class="posts">

<h2>WebService</h2>


<div id="info"></div>



<script>


var xhr = new XMLHttpRequest();

// läs ut svar

xhr.onload = function() {
    if(xhr.status === 200) {
        console.log(xhr.responseText);

        var jsonStr = JSON.parse(xhr.responseText);

        var users= jsonStr.posts;

        for(var i=0; i<users.lenght; i++) {
            document.getElementById("info").innerHTML = xhr.responseText;
        }
    }
};

xhr.open("GET","http://localhost/webbutveckling2/moment3/webservice.php",true);
xhr.send(null);

</script>










</p>

</div>

</body>
</html>

我不能为善良的爱看到我做错了什么。

我需要这个输出JSON内容,我也只想输出从JSON文件中委托的3个最新内容。

我做错了什么?

编辑:

这是JSON输出:

[
    {
        "id": "2",
        "name": "Emil1234",
        "post": "My name is Emil and this is a test for a post on the guestbook wall",
        "postdate": "2018-03-15 16:41:10"
    },
    {
        "id": "22",
        "name": "golddigger",
        "post": "Hi! This is my first visit to this epic guestbook",
        "postdate": "2018-03-25 14:52:11"
    },
    {
        "id": "23",
        "name": "Tester123",
        "post": "Im just doing another test dont mind me",
        "postdate": "2018-03-25 14:52:31"
    },
    {
        "id": "24",
        "name": "the bluff",
        "post": "Whatsup all",
        "postdate": "2018-03-25 15:17:17"
    }
]

当我将js中的代码更新为以下内容时:

<script>


var xhr = new XMLHttpRequest();

// läs ut svar

xhr.onload = function() {
    if(xhr.status === 200) {
        console.log(xhr.responseText);
        document.getElementById("info").innerHTML = xhr.responseText;
</script>

它确实按以下方式输出原始信息:

The output

如何输出此内容才能显示最新的3个帖子?

编辑2:

<script>


var xhr = new XMLHttpRequest();

// läs ut svar

xhr.onload = function() {
    if(xhr.status === 200) {
        console.log(xhr.responseText);
        document.getElementById("info").innerHTML = xhr.responseText;

        //var jsonStr = JSON.parse(xhr.responseText);

        var users = JSON.parse(xhr.responseText);

        for(var i=0; i < users.length; i++) {
            document.getElementById("info").innerHTML = users[i].name + " - " + users[i].post + " - " + users[i].postdate ;     }
    }
};

xhr.open("GET","http://localhost/webbutveckling2/moment3/webservice.php?numrows=3",true);
xhr.send(null);

</script>

这只输出一个,我的网址错了吗?

输出以下内容: Output

1 个答案:

答案 0 :(得分:0)

在ajax调用中没有“numrows”作为get请求,只是尝试将fetch函数放入while循环并在输出变量中连接