JSON循環數組只顯示最後一個值

我想用一個簡單的HTTP POST請求使用AXIOS.Its就像一個Ajax請求來檢索數據。這是HTML。它發送一個post請求到getData.php。JSON循環數組只顯示最後一個值

<!doctype html> 
<html> 
<head> 
    <title>axios - post example</title> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> 
</head> 
<body class="container"> 
<h1>Axios.post</h1> 

<form role="form" class="form" onsubmit="return false;"> 
    <div class="form-group"> 
     <label for="data">Output</label> 
     <textarea id="data" class="form-control container" rows="5"></textarea> 
    </div> 
    <button id="post" type="button" class="btn btn-primary">POST</button> 
</form> 

<!--<div id="output" class=""></div>--> 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 
<script> 
    (function() { 

     document.getElementById('post').onclick = function() { 
      var output = document.getElementById('data'); 
      axios.post('getData.php') 
       .then(function (res) { 


        // console.log(res.data); 
        output.className = 'container'; 
         for (i = 0; i < res.data.length; i++) { 
         output.innerHTML = res.data[i].id + "\n" + res.data[i].name; 

        } 

       }) 
       .catch(function (err) { 
        output.className = 'container text-danger'; 
        output.innerHTML = err.message; 
       }); 
     }; 
    })(); 
</script> 
</body> 
</html>`

在訪問getdata.php

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 

// Create connection 
$conn = mysqli_connect($servername, $username, $password,"db_test"); 


$sql = "SELECT * FROM user"; 
$result = $conn->query($sql); 
$resultArray = array(); 
if ($result->num_rows > 0) { 

    while($row = $result->fetch_assoc()) { 
     $resultArray[] = $row; 

    } 

    echo json_encode($resultArray); 
    return; 

} else { 
    echo "0 results"; 
} 
$conn->close(); 

?>

但是當我通過陣列試圖for循環，它返回只有最後row.It從表中提取數據，並創建一個數組。 for循環有什麼問題？

來源

2017-07-31 jonm

不良，不串聯'output.innerHTML ='GOOD被串聯'output.innerHTML + =' – RiggsFolly

output.innerHTML = res.data[i].id + "\n" + res.data[i].name;

將只需更換先前添加的一切。

output.innerHTML += res.data[i].id + "\n" + res.data[i].name;

將解決您的問題。

來源

2017-07-31 09:23:35 Val

它的作品。謝謝！ – jonm

因爲你的覆蓋output.innerHTML在for循環所以last value只存在。

使用appendChild()

output.appendChild(res.data[i].id + "\n" + res.data[i].name);

來源

2017-07-31 09:23:49 JYoThI

JSON循環數組只顯示最後一個值

回答

相關問題