[英]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.