如何使用php从sql查询中获得完整的结果，然后使用javascript显示

I have a php script that executes a query. The result can however be multiple rows. How can I do a json_encode of the rows of data and then use javascript to get that data and display it in a table?

我有一个执行查询的php脚本。结果可以是多行。如何对数据行进行json_encode，然后使用javascript获取数据并将其显示在表中?

This file echos two json encoded lines, each representing one row

这个文件包含两个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);
    }
?>

I wanna use the javascript script and ajax to get both the rows and then create a function that creates a table based on the result

我想使用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>

I think the html will look something to display the table would look something like this:

我认为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>';

1 个解决方案

#1

1 be sure you are outputting all rows in php just once

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 in your javascript just try to use console instead of alert - if you need help with this, it may be a new question, but google "console" debugging in firefox/chrome.

在你的javascript中尽量使用控制台而不是警告——如果你需要帮助，这可能是一个新的问题，但是谷歌“控制台”在firefox/chrome中的调试。

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

3 now you need to use javascript to populate all the rows by creating html...try something like this

现在您需要使用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
}

#1