使用 Node.js 在 html 表中显示 mysql

2023-12-14

我正在学习如何将node.js 与mysql 一起使用。我试图找到一些好的文档,但徒劳无功。我现在可以在浏览器中显示 mysql 数据,但我想在某个时候通过我的 index.html 和 css 文件来处理它。

这是我的 app.js:

// moduels
var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('bodyParser')

// 
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({extended: false}));

// connect to database
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "1234",
    database: "BathBombs_DB"
});

// routes
app.get('/', function(request, response){
    console.log('GET request received at /') 
    con.query("SELECT * FROM customers", function (err, result) {
        if (err) throw err;
        else{
            response.send(result)
        }

    });
});

// listen for trafic and display on localhost:9000
app.listen(9000, function () {
    console.log('Connected to port 9000');
});

我的 index.html 网站如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <form action="/" method="POST">
            <table type="text" name="firstname" ></table>
    </form>

</body>
</html>

您必须进行 ajax 调用才能从服务器获取结果并使用 javascript 与 HTML 内容绑定,如下所示:

HTML模板

 <table id="tableData" class="table table-fixed">
<thead>
  <tr>
  </tr>
</thead>
<tbody class="tbody" >
</tbody>

这是进行 ajax 调用的脚本

$(document).ready(() => {

$.ajax({
    url: "http://localhost:9000/list", 
    method: 'GET',
    success: function(response){
        if(response.rows.length > 0){
            for(let index = 0; index < response.rows.length; index++) {
                var newRow = $("<tr>");
                var cols = "";
                var firstname = '';
                var lastname = '';
                var gender = '';
                cols += '<td> '+ response.rows[index].firstname +'</td>';
                cols += '<td> '+ response.rows[index].lastname +'</td>';
                cols += '<td> '+ response.rows[index].gender+'</td>';                
                newRow.append(cols);
                $("#tableData .tbody").append(newRow);
            }  

        }
    }
})
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Node.js 在 html 表中显示 mysql 的相关文章

  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 如何使用 JavaScript 获取没有 HTML 元素的纯文本?

    我的 HTML 中有 1 按钮和一些文本 如下所示 function get content I don t know how to do in here
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • 如何检查请求是否通过 Express 中的 https 发送

    我想强制某些路线始终在我的 Express 应用程序中使用安全连接 我如何检查以确保它使用 https 我在 heroku 上使用搭载 ssl 进行部署 我也在 Heroku 上部署 当他们使用 nginx 进行反向代理时 他们添加了一堆标
  • Cloudfoundry:如何组合两个运行时

    cloundfoundry 有没有办法结合两个运行时环境 我正在将 NodeJS 应用程序部署到 IBM Bluemix 现在 我还希望能够执行独立的 jar 文件 但应用程序失败 APP 0 bin sh 1 java not found
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • Mongoose 和 Promise:如何获取查询结果数组?

    使用猫鼬从数据库和 Q 中查询结果以获取承诺 但发现很难只获取可用用户列表 目前我有一些这样的东西 var checkForPerson function person people mongoose model Person Person
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 使用函数的 SQL 查询 - 如何获取列表的最大计数

    如何查询 MAXIMUM COUNT 交易次数 我的代码如下 SELECT customer id COUNT customer id FROM rental GROUP BY customer id HAVING MAX COUNT cu
  • 流星内存不足

    我正在使用流星来制作报废引擎 我必须执行一个 HTTP GET 请求 这会向我发送一个 xml 但这个 xml 大于 400 ko 我得到一个异常 内存不足 result Meteor http get http SomeUrl com 致
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 选择获取与 MySQL Group 中 max 对应的整行

    当我使用Max使用后查找特定 MySQL 组中字段的最大值GROUP BY 是否可以获取包含最大值的整行 我在处理一些论坛代码时偶然发现了这个线程 我想获取每个线程的最新帖子并将其显示在特定板的线程列表中 Quassnoi上面的回答对我非常
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4
  • 在 GWT 中,在任何主机页标记上添加事件处理程序

    我想为任何标签添加 MouseOver 事件处理程序 举个例子 我想为旧版 HTML 页面中的每个锚点页面添加事件处理程序 继GWT指南 http code google com webtoolkit doc 1 6 DevGuideUse

随机推荐

  • 在 C# 和 C 之间传递对象

    我的应用程序由带有非托管 C dll 调用的 C 代码组成 在我的 C 代码中 我有一个对象 类 其中它的属性都是系统类型 例如 string 和 int 以及我定义的其他对象 我想将这个复杂的 Graph cs 对象传递给我的 C dll
  • 为什么 PHP 会干扰我的 HTML5 MP4 视频?

    我正在编写一个提供 H 264 编码 MP4 视频的 Web 应用程序 在 Chrome 和 Safari 中 它通过 HTML5 视频标签来完成此操作 为了控制对这些视频的访问 它们的内容通过 PHP 使用非常简单的机制提供 header
  • 将用户输入的 url 变成 Rails 中的外部链接

    我希望用户能够输入一个网址 然后在我的视图中放置一个指向该网址的链接 有效输入可以是例如https www google com path http www google com www google com 是否有标准的 Rails 方法
  • 无法将“Microsoft.Expression.Platform.WPF.InstanceBuilders.WindowInstance”类型的对象强制转换为“System.Windows.Window”类型

    我在 WPF 中创建了一个窗口样式
  • 如何在 Mac OSX 上的 Matlab 2010b 或更高版本中检查可用内存?

    我有一份 2004 年的 Matlab 副本 忘记了版本号 但它确实很旧 我可以使用 features memstat 命令来查看有多少内存可供 Matlab 使用 该命令在 Matlab 2010b 中不再适用 我应该怎么做才能查看可用内
  • 使用 jQuery UI 对 Ember.js 项目进行排序后,使用 Ember Data 的 model.deleteRecord() 不起作用

    我使用 jQuery UI Sortable 和 Ember js 对项目列表进行排序 它似乎工作得很好 直到我删除一条 Ember 数据记录 模型已正确删除 但 UI 未更新以反映这一点 如果删除最后一条记录 则会引发 索引超出范围 错误
  • Cocoa 应用程序内部的 Applescript

    对于我正在编写的应用程序 我需要访问一些其他应用程序的项目 Applescript 似乎是最好的方法 我一直在使用 Appscript 框架 它运行良好 因为它允许我对其进行线程化 并且当 Applescript 需要一段时间时不会使我的应
  • 给定编码中的字符无效

    XmlDocument oXmlDoc new XmlDocument try oXmlDoc Load filePath catch Exception ex Log Error Here try Encoding enc Encodin
  • Swift 中如何获取枚举值的名称?

    如果我有一个原始的枚举Integer values enum City Int case Melbourne 1 Chelyabinsk Bursa let city City Melbourne 我怎样才能转换city值到字符串Melbo
  • 有必要捕获“段错误”吗?

    我知道 如果有足够的背景 人们可能希望能够建设性地使用 即恢复 segfault健康 状况 但是 这样的努力值得吗 如果是 在什么情况下 你不能真正指望从段错误中恢复 您可以检测到它的发生 并在可能的情况下转储相关的特定于应用程序的状态 但
  • Predict_classes() 的函数式 API Keras 替代解决方案

    请参考here对于我之前的背景信息问题 按照answer建议来自纳西姆 本 我使用函数式 API 训练了双路径架构模型 现在我感到困惑 因为我需要预测每个像素的类别 这是相同的代码 imgs io imread test img astyp
  • 挂了还有问题吗?

    什么是 挂其他 问题 这个名字合适吗 我总是遵循 C 编码标准 忘了是哪一个 使用带有控制结构的括号 块 所以我不 通常会有这个问题 最后一个 其他属于 但为了理解可能出现的问题 外国代码如果能牢固地理解就好了 这个问题 我记得在一本关于
  • 在运行时更改 SetInterval 的间隔

    我编写了一个 JavaScript 函数 它使用 setInterval 每隔十分之一秒操作一个字符串 进行一定次数的迭代 function timer var section document getElementById txt val
  • 如何在Python 2中通过线程充分利用CPU核心

    下面的代码似乎是顺序执行的 而不是并发执行的 而且它只使用了一个CPU核心 有没有办法让它使用多个核心或在线程之间切换内容 我希望它能像java中的Thread类一样工作 import threading def work s for i
  • 如何在Java中检查2个日期是否在同一天

    我有 2 个日期变量 Date1 和 Date2 我想检查日期 1 是否与日期 2 属于同一日期 但允许它们有不同的时间 我该怎么做呢 这看起来是一件很容易做的事情 但我却很困难 编辑 我想避免外部库和东西 编辑 我最初的想法是删除小时 分
  • 运行 sonarrunner 时未找到类错误

    我收到类未找到错误 该类无法通过类加载器访问 并且从 gradle 运行 sonarrunner 时会提示错误 这些类作为依赖项包含在 gradle 的编译时 并且 gradle 构建工作正常 如何为声纳包含这些类 14 53 24 322
  • 如何处理多个xml标准? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我正在尝试将一组本地包装类写入我们的机构 API 我在一所高等教育机构工作 这些
  • Android 无法加载本地 libcrypto 未满足的链接错误

    我需要在我的应用程序中运行比操作系统中版本更新的 openssl 版本 我能够修补和 Android 源代码以编译较新的版本 然后提取共享库以在我的应用程序中使用 然后 我能够编译并链接我的本机代码 该代码仅需要较新版本的 openssl
  • 部署具有所有包依赖项的 Python Cloud Function

    我想部署一个不依赖于使用 requests txt 来安装软件包的云功能 我希望这些包可以在存储中使用 或者作为功能的一部分进行压缩和上传 这可能吗 编辑 2019 年 6 月 14 日 基本上我想用我的代码发送 numpy 和 panda
  • 使用 Node.js 在 html 表中显示 mysql

    我正在学习如何将node js 与mysql 一起使用 我试图找到一些好的文档 但徒劳无功 我现在可以在浏览器中显示 mysql 数据 但我想在某个时候通过我的 index html 和 css 文件来处理它 这是我的 app js mod