如何使用php從sql查詢中獲取完整結果，然后使用javascript顯示該結果

Question

我有一個執行查詢的PHP腳本。 但是結果可以是多行。 如何對數據行進行json_encode，然后使用javascript獲取該數據並將其顯示在表格中？

該文件回顯兩條json編碼的行，每行代表一行

<?php  
    include("config.php");
    session_start();
    $user = $_SESSION["loggedIn"];
    $sql = "SELECT * FROM tickets where SenderName =\"$user\" OR SenderName = \"Yoon\"";
    $result = $conn->query($sql);
    while($row = $result->fetch_assoc()){
        echo json_encode($row);
    }
?>

我想使用javascript腳本和ajax來獲取兩行，然后創建一個基於結果創建表的函數

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="buttons.css">
    <script type="text/javascript">
        function processData() {
            var httpRequest;
            //alert("hi there");

            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                httpRequest = new XMLHttpRequest();
                if (httpRequest.overrideMimeType) {
                    httpRequest.overrideMimeType('text/xml');
                }
            }
            else if (window.ActiveXObject) { // IE
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {}
                }
            }
            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            httpRequest.open('GET', 'userTables.php', true);

            httpRequest.onreadystatechange = function() { 
                showTickets(httpRequest);
            }
             httpRequest.send();
        }
        function show(){
            document.getElementById("buttons").style.visibility= "hidden" ;
        }
        function showTickets(httpRequest){
            if (httpRequest.readyState == 4) {
                if (httpRequest.status == 200){
                   alert("hi there");
                   var data = JSON.parse(httpRequest.responseText);
                   alert(data["SenderName"]); //I can only get the data in a key value array if i have just one row as the result
                                    }
                else{
                    alert('Problem with request'); 
                }
            }
        }

        function createTable(httpRequest){
           //need to add innerhtml to some div that shows the table
        }



    </script>
</head>
<body>
<h1>Welcome! </h1>
 <div id="buttons">
        <button class="myButton" onclick="processData()">View My Tickets</button> 
        <button class="myButton">Submit Ticket</button> 
        <button class="myButton">Change my Password</button> 
 </div>
 <div id = "table" >

 </div>
</body>
</html>

我認為html看起來要顯示表格，看起來像這樣：

<table align="left" cellspacing="5" cellpadding="8"> 
    <tr><td align="left"><b>TicketNum</b></td>
    <td align="left"><b>Recieved</b></td>
    <td align="left"><b>SenderName</b></td>
    <td align="left"><b>Sender Email</b></td>
    <td align="left"><b>Subject</b></td>
    <td align="left"><b>Tech</b></td>
    <td align="left"><b>Status</b></td>
    <td align="left"><b>Select</b></td></tr>';

    // mysqli_fetch_array will return a row of data from the query
    // until no further data is available
    while($row = $result->fetch_assoc() ){

    echo '<tr><td align="left">' . 
    row['TicketNum'] . '</td><td align="left">' . 
    row['Recieved'] . '</td><td align="left">' .
    row['SenderName'] . '</td><td align="left">' . 
    row['SenderEmail'] . '</td><td align="left">' . 
    row['Subject'] . '</td><td align="left">' .
    row['Tech'] . '</td><td align="left">' . 
    row['Status'] . '</td><td align="left">' .

    '</td><td align="left">';
</table>';

Answer 1

1確保您僅在php中輸出所有行

$result = $conn->query($sql);
$data = array();
while($row = $result->fetch_assoc()){
    $data[] = $row;
}
exit(json_encode($data));  // there probably is nothing else, just exit

2在您的javascript中，只需嘗試使用控制台而不是警報-如果您需要幫助，這可能是一個新問題，但是Google在“ Firefox” / chrome中“控制台”進行了調試。

var data = JSON.parse(httpRequest.responseText);
console.log(data); // you will have an object of the rows now

3現在您需要使用javascript通過創建html來填充所有行...嘗試類似這樣的操作

var data = JSON.parse(httpRequest.responseText);
for (var key in data) {
    // skip loop if the property is from prototype
    if (!data.hasOwnProperty(key)) continue;

    var row = data[key];
    console.log(row);
    // now you need to make your html using javascript
    // how to do that is a new question, imho
}

如何使用php從sql查詢中獲取完整結果，然后使用javascript顯示該結果

問題描述

1 個解決方案

解決方案1
2 已采納 2016-11-03 00:36:18

如何使用php從sql查詢中獲取完整結果，然后使用javascript顯示該結果

問題描述

1 個解決方案

解決方案1 2 已采納 2016-11-03 00:36:18

解決方案1
2 已采納 2016-11-03 00:36:18