简体   繁体   English

我怎样才能获得自己的每个数据库信息?

[英]How can I get each database info in their own <td>?

I am now working on something with PHP, Javascript, PDO, AJAX and MySQL. I am now working on something with PHP, Javascript, PDO, AJAX and MySQL. I know I can work with mysqli but I want to work with PDO to learn new things.我知道我可以与 mysqli 合作,但我想与 PDO 合作学习新事物。

I want each info in their own td like on this example picture:我希望每个信息都在他们自己的 td 中,就像这个示例图片一样:

点击这里查看

This is what I have right now:这就是我现在所拥有的:

点击这里查看

I already tried something with a loop but I can't figure it out how to fix it.我已经用循环尝试了一些东西,但我不知道如何修复它。

I hope someone can help me out, thanks you in advance!我希望有人可以帮助我,提前谢谢你!

index.php index.php

  <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,       minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


</head>
<body>


<section class="content">

    <table>
        <tr>
        <th>Number</th>
        <th>Name</th>
        <th>Adress</th>
        <th>Postalcode</th>
        <th>City</th>
        <th>Phonenumber</th>
        <th>Creditcode</th>
        </tr>
        <tbody id="data">
        </tbody>
    </table>

</section>

<script src="js/main.js"></script>
</body>
</html>

getdata.php getdata.php

<?php
$servername = "127.0.0.1";
$dbname = "customers";
$username = "denzel";
$password = "baudet";


        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare("SELECT * FROM customers");

        $stmt->execute();

        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($result);



?>

main.js main.js

   var ajax = new XMLHttpRequest();
    var method = "POST";
    var url = "getdata.php";
    var asynchronous = true;

    ajax.open(method, url, asynchronous);

    ajax.send();

    ajax.onreadystatechange = function () {
       if (this.readyState == 4 && this.status == 200){
     var data = JSON.parse(this.responseText);
           document.querySelector("#data").innerHTML = (this.responseText);

    var html = "";

    for (var a = 0; a < data.length; a++)
    {
        var number = data[a].number;
        var name= data[a].name;
        var adress = data[a].adress;
        var postalcode = data[a].postalcode;
        var city = data[a].city;
        var phonenumber = data[a].phonenumber;
        var creditcode = data[a].creditcode;

        html += "<tr>";
        html += "<td>" + number + "</td>";
        html += "<td>" + name + "</td>";
        html += "<td>" + adress + "</td>";
        html += "<td>" + postalcode + "</td>";
        html += "<td>" + city + "</td>";
        html += "<td>" + phonenumber + "</td>";
        html += "<td>" + creditcode + "</td>";
        html += "</tr>";
    }

    document.querySelector("#data").innerHTML = html;
       }
    }

All your database columns have initial capital letters, you need to access the JSON properties correctly.您的所有数据库列都有首字母大写字母,您需要正确访问 JSON 属性。 Change改变

        var number = data[a].number;
        var name= data[a].name;
        var adress = data[a].adress;
        var postalcode = data[a].postalcode;
        var city = data[a].city;
        var phonenumber = data[a].phonenumber;
        var creditcode = data[a].creditcode;

to

        var number = data[a].Number;
        var name= data[a].Name;
        var adress = data[a].Adress;
        var postalcode = data[a].Postalcode;
        var city = data[a].City;
        var phonenumber = data[a].Phonenumber;
        var creditcode = data[a].Creditcode;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM