用JSON打印sql表

Question

我想打印所有的sql表並在html表中顯示它們。我是新的PHP，JSON和AJAX。我成功發送用戶名並在php中獲得結果。我認爲在JSON部分或AJAX中存在問題。誰能幫我？

的index.php

<div class="col-lg-6"> 
    <p id="usr" style="color:gray; font-size: 48px;"></p> 
    <script type="text/javascript"> 

     var usr = document.getElementById("dom-target"); 
     var username = usr.textContent; 
     username = username.trim().replace(/ /g, '%20'); 
     document.getElementById("usr").innerHTML = username; 
     var sendtophp = "username="+username; 

     $.ajax({ 
     type: "POST", 
     url: "getcoursetable.php", 
     data: sendtophp, 
     dataType:"json", 
     success: function(response) { 
      console.log(response); 
      var trhtml =''; 
      document.getElementById("demo").innerHTML = response; 
      $.each(response, function (i, item) { 
       trHTML += '<tr><td>' + item.cname + '</td><td>' + item.subject + '</td><td>' + item.course + '</td><td>'+ item.grade + '</td></tr>'; 
      }); 
      $('#results').append(trHTML); 
     } 
     }); 

    </script> 
    <table id="results"></table> 
</div> 

getcoursetable.php

<?php 
    include_once "connection.php"; 

    if(isset($_POST["username"])){ 
    $nick = $_POST["username"]; 

    $prep = "SELECT * FROM `enrolledtable` WHERE nickname='$nick'"; 

    $results = mysqli_query($con, $prep); 

    $jsonData = array(); 
    while ($row = $results->fetch_row()) { 
     $jsonData[] = $row; 
    } 
    echo json_encode($jsonData); 
     } 
?> 

現在，我可以打印數據，但不喜歡的表，這樣

<p id="demo">denemee,CS,300,B,denemee,CS,301,B ,denemee,CS,305,B ,denemee,CS,307,B,denemee,CS,408,A-,denemee,IE,208,B ,denemee,MATH,306,B</p> 

Answer 1

頂部宣佈這個我解決我的問題。這可以採取在PHP表和創建HTML表。

的index.php

<div class="col-lg-6"> 
    <p id="usr" style="color:gray; font-size: 48px;"></p> 
    <script type="text/javascript"> 

     var usr = document.getElementById("dom-target"); 
     var username = usr.textContent; 
     username = username.trim().replace(/ /g, '%20'); 
     document.getElementById("usr").innerHTML = username; 
     var sendtophp = "username="+username; 

     $.ajax({ 
     type: "POST", 
     url: "getcoursetable.php", 
     data: sendtophp, 
     dataType:"json", 
     success: function(response) { 
      var trhtml =''; 
      $.each(response, function (i, item) { 
       trhtml += '<tr><td>' + item[0] + '</td><td>' + item[1] + '</td><td>'+ item[2] + '</td></tr>'; 
      }); 
      $('.append').append(trhtml); 
     } 
     }); 

    </script> 
    <table id="results"> 

    <tr> 
    <th>Name</th> 
    <th>Subject</th> 
    <th>Course</th> 
    <th>Grade</th> 
    </tr> 
    <tbody class="append"> 

    </tbody> 
    </table> 
</div> 

getcoursetable.php

<?php 
    header('Content-Type: application/json'); 
     include_once "connection.php"; 

     if(isset($_POST["username"])){ 
     $nick = $_POST["username"]; 

     $prep = "SELECT subject,course,grade FROM `enrolledtable` WHERE nickname='$nick'"; 

     $results = mysqli_query($con, $prep); 

     $jsonData = array(); 
     while ($row = $results->fetch_row()) { 
      $jsonData[] = $row; 
     } 
     echo json_encode($jsonData); 
     } 
?> 

Answer 2

問題可能圍坐這裏：

 console.log(response); 
     var trhtml =''; 
     document.getElementById("demo").innerHTML = response; 
     $.each(response, function (i, item) { 
      trHTML += '<tr><td>' + item.cname + '</td><td>' + item.subject + '</td><td>' + item.course + '</td><td>'+ item.grade + '</td></tr>'; 
     }); 
     $('#results').append(trHTML); 

首先，JavaScript是區分大小寫的語言：trhtml和trHTML不是相同的變量。第二，如果你的句子「輸出php」意味着你報告了輸出console.log()，那麼response看起來像一個字符串給我，你必須將它解析爲Json。

此外，我不知道字符串denemee的開頭是什麼，但它打破了Json表示法。

Answer 3

你的Ajax功能正在尋找類型的JSON數據，因此你需要在getcoursetable.php

header('Content-Type: application/json');