【发布时间】：2021-07-03 19:07:35
【问题描述】：
我有一些数据存储在 SQL 文件中，并希望使用 AJAX JQuery 将 HTML 上的数据显示为表格。当我检查数据时数据很好，但我很困惑如何在 HTML 中显示数据。一切对我来说都是一个新概念，我很难找到正确的方法来做这件事。这是我的代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>MySQL Employees </title>
</head>
<body>
<div>
<p id = "data"></p>
</div>
<div id = "employee">
<i>RECORDS PLACED HERE</i>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
AJAX jQuery
$(document).ready(function() {
$.ajax({
url: "/ajax-GET-Employee",
dataType: "json",
type: "GET",
success: function(data) {
console.log("Returning MySQL data", data);
// YOUR CODE GOES HERE
for(let i = 0; i < data.rows.length; i++) {
let employee = data.rows[i];
console.log(employee.first_name, employee.last_name, employee.employee_id, employee.phone_number, employee.workstation, employee.security_level, employee.work_experience, employee.sales_record, employee.work_hour, employee.gender);
}
var div = $("data");
div.html(data);
},
error: function(jqXHR, textStatus, errorThrown) {
$("#data").text(textStatus + " " + errorThrown
+ jqXHR.responseText);
}
});
});
SQL
create table employee (
ID int NOT NULL AUTO_INCREMENT,
first_name varchar(100),
last_name varchar(100),
employee_id varchar(100),
phone_number varchar(100),
workstation varchar(100),
security_level varchar(100),
work_experience varchar(100),
sales_record varchar(100),
work_hour varchar(100),
gender varchar(100),
PRIMARY KEY (ID)
);
insert into employee (first_name, last_name, employee_id, phone_number, workstation, security_level, work_experience, sales_record, work_hour, gender) values ('michael', 'jackson', '12321', '778223123', 'West Wing','Level 3', '5 years', '240 sales/month', '8AM-5PM', 'male');
insert into employee (first_name, last_name, employee_id, phone_number, workstation, security_level, work_experience, sales_record, work_hour, gender) values ('jason', 'ahn', '32183', '2364382954', 'North-South Wing','Level 1', '2 years', '80 sales/month', '8AM-4PM', 'male');
后端 JS
// REQUIRES
const express = require('express');
// as of Express 4, you need this:
const app = express();
// https://www.npmjs.com/package/jsdom
const { JSDOM } = require('jsdom');
const fs = require("fs");
// npm install mysql
const mysql = require('mysql');
app.use('/js', express.static('static/js'));
app.use('/css', express.static('static/css'));
app.get('/', function (req, res) {
let doc = fs.readFileSync('./static/html/main.html', "utf8");
// leaving this in there so that you can see the opportunity to
// change the document via jQuery - on the server side!
//console.log(JSDOM);
let dom = new JSDOM(doc);
//let $ = require("jquery")(dom.window);
//$("#p1").html("hello world!");
res.send(dom.serialize());
});
app.get('/ajax-GET-Employee', function (req, res) {
//set header to JSON type
res.setHeader('Content-Type', 'application/json');
let connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'test'
});
connection.connect();
connection.query('SELECT * FROM employee', function (error, results, fields) {
if (error) {
throw error;
}
console.log('Rows returned are: ', results);
res.send({ msg: "success", rows: results });
});
connection.end();
// set the type of response:
//res.send({ msg: "No data!" });
});
// for page not found (i.e., 404)
app.use(function (req, res, next) {
res.status(404).send("<html><head><title>Page cannot be found.</title></head><body><p>Nothing goes here.</p></body></html>");
})
// RUN SERVER
let port = 8000;
app.listen(port, function () {
console.log('Example app listening on port ' + port + '!');
})
【问题讨论】：
-
您缺少后端代码，您基本上在其中执行 SQL 调用、从结果中生成对象并将它们作为 JSON 发送回客户端。也就是说，AJAX请求和数据库之间的代码
-
@FCR 当 OP 声明数据正常到达时，不明白为什么这是相关的。问题是如何将其解析为 DOM 元素。无需询问与情况无关的代码