Fatal编程技术网
  • javascript/
  • 如何使用php从sql查询中获得完整结果，然后使用javascript显示结果

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

javascript php ajax

如何使用php从sql查询中获得完整结果，然后使用javascript显示结果,javascript,php,ajax,Javascript,Php,Ajax,我有一个执行查询的php脚本。但是，结果可以是多行。如何对数据行进行json_编码，然后使用javascript获取数据并将其显示在表中 该文件回显两行json编码的行，每行代表一行 <?php include("config.php"); session_start(); $user = $_SESSION["loggedIn"]; $sql = "SELECT * FROM tickets where SenderName =\"$user\" OR

我有一个执行查询的php脚本。但是，结果可以是多行。如何对数据行进行json_编码，然后使用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>


函数processData（）{
var-httpRequest；
//警惕（“你好”）；
如果（window.XMLHttpRequest）{//Mozilla，Safari。。。
httpRequest=新的XMLHttpRequest（）；
if（httpRequest.overrideMimeType）{
httpRequest.overrideMimeType（'text/xml'）；
}
}
如果（window.ActiveXObject）{//IE
试一试{
httpRequest=新的ActiveXObject（“Msxml2.XMLHTTP”）；
}
捕获（e）{
试一试{
httpRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
捕获（e）{}
}
}
如果（！httpRequest）{
警报（“放弃：（无法创建XMLHTTP实例”）；
返回false；
}
open（'GET'，'userTables.php'，true）；
httpRequest.onreadystatechange=函数（）{
展示券（httpRequest）；
}
httpRequest.send（）；
}
函数show（）{
document.getElementById（“按钮”）.style.visibility=“hidden”；
}
函数showtockets（httpRequest）{
if（httpRequest.readyState==4）{
如果（httpRequest.status==200）{
警惕（“你好”）；
var data=JSON.parse（httpRequest.responseText）；
警报（data[“SenderName”]；//如果结果只有一行，则只能获取键值数组中的数据
}
否则{
警报（“请求问题”）；
}
}
}
函数createTable（httpRequest）{
//需要将innerhtml添加到显示表的某个div中
}
欢迎
看我的票
提交票证
更改我的密码
我认为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>';


蒂克特南
收到
SenderName
发件人电子邮件
主题
技术人员
地位
选择'；
//mysqli_fetch_数组将从查询返回一行数据
//直到没有进一步的数据
而（$row=$result->fetch_assoc（））{
回显“”。
第['TicketNum'].'行。
第['received'].'行。
第['SenderName'].'行。
第['SenderEmail'].'行。
第['Subject'].'行。
第['Tech'].'行。
第['Status'].'行。
'';
';
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中，试着使用控制台而不是警报-如果你需要这方面的帮助，这可能是一个新问题，但是谷歌“控制台”在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
}
如果属性来自prototype，您能解释一下//跳过循环是什么意思吗？也感谢您的回答！这很有意义代码行本身阻止您再次打印实际数据，以防prototype（对象）引用自身。