如何使用 AJAX JQuery 将 HTML 中的 SQL 数据显示为表格？
Posted
技术标签:
【中文标题】如何使用 AJAX JQuery 将 HTML 中的 SQL 数据显示为表格？【英文标题】：How to display SQL data in HTML as a table with AJAX JQuery? 【发布时间】：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 元素。无需询问与情况无关的代码 【参考方案1】：首先你需要做你的后端代码，它可以是 php、Nodejs、python 等。
假设你有一个，你可以将你的数据作为 JSON 返回。
这是一个非常基本的示例，可以帮助您开始：
const jsonData = [
first_name: "michael",
last_name: "jackson"
,
first_name: "jason",
last_name: "ahn"
];
var list = "<table border='1'>";
$.each(jsonData, function (index, value)
list += "<tr >";
list += "<td>" + value.first_name + "</td>";
list += "<td>" + value.last_name + "</td>";
list += "</tr>";
);
list += "</table>";
$("#app").html(list);
Image of the result
【讨论】：
不写const jsonData，有没有办法直接从sql文件中检索数据？我已经通过添加后端 JS 代码来编辑我的问题。 是的，只需从您的 API 返回数据中替换 jsonData，如果您提供 API 返回数据的示例，我可以用示例来帮助您以上是关于如何使用 AJAX JQuery 将 HTML 中的 SQL 数据显示为表格？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery AJAX API 交互。如何使用 html 视图处理数据输出？
如何通过 Ajax jQuery 将简单数据发送到 Django 中的views.py？
使用 jQuery ajax 函数将 php 值发送到 php 函数
如何使用 jquery 或 ajax 在 c#/asp.net 中为 MVC 项目更新 razor 部分视图