使用用户输入从 MySQL 数据库中获取和显示数据答案

【问题标题】：Getting and displaying data from a MySQL database using user input使用用户输入从 MySQL 数据库中获取和显示数据
【发布时间】：2021-03-10 15:32:23
【问题描述】：

我正在尝试创建一个网页，用户在其中将 ID 号输入 HTML 表单，ID 号用于从 MySQL 数据库中获取与该 ID 关联的数据，并将数据显示在网页上。但是，我不知道如何使用表单中的输入从数据库中获取特定数据，然后将其显示回网页上。谁能帮我？我在下面包含了我的 Node.js 和 HTML 文件。谢谢！

index.js

'use strict';

const express = require("express"); 
const app = express(); 

const bodyParser = require("body-parser") 
app.use(bodyParser.urlencoded({ extended:true})); 

var mysql = require('mysql');

var conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '123',
  database: 'jobs'   
}); 

conn.connect(function(err) {
  if (err) throw err;
  console.log('Database connected.');   
});

const PORT = 8080;
const HOST = '0.0.0.0';

app.post('/show', function(req,res){

    var id = req.body.jobID;

    var sql = `SELECT job FROM healthcare where id='${id}'`;
    conn.query(sql, function(err, result, fields) {
        if (err) throw err;
        console.log("Data fetched.")
        res.json(result);
    });
}); 

app.listen(PORT,HOST);

job.html

<!DOCTYPE html>

<html>

    <body>

        <h1>Enter the job ID </h1>

        <form id="myForm" method="POST" action="/show">

            <input type="text" id="jobID" name="jobID">

            <input type="button" id="submit" name="submit" value="Submit" >

        </form>

        <p>Data should go here </p>


    </body>

</html>

【问题讨论】：

了解 sql 注入以及准备和绑定查询的重要性

标签： html mysql node.js

【解决方案1】：

您应该使用 axios 函数来调用 API，而不是直接从表单调用 API，然后当您的 API 返回响应时，您可以在 axios 函数中接收它。

类似这样的：

$('#submit').on('click', function(event) {
        event.preventDefault();
        const baseUrl = 'https://localhost:8080';
        let jobID = $('#jobID').val();
        //Create a FormData object to build key-value pairs of information before
        //making a POST HTTP request.
        let webFormData = new FormData();
        webFormData.append('jobID', jobID);
        axios({
            method: 'post',
            url: baseUrl + '/show',
            data: webFormData,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(function(response) {
            //handle API response here
        }).catch(function(error) {
            //handle errors here
        })
}

此脚本的工作原理是，当您单击表单的提交按钮时，会使用 axios 函数检索数据并将其发送到 API，然后该函数可以帮助获取 API 返回的响应。您需要在脚本标签或 javascript 文件中将其添加到前端，您还需要导入 axios 才能使用 axios 函数。附带说明一下，因为您的 API 只是检索数据，它应该只是一个 GET，而不是一个 POST，因为您没有在数据库中创建任何新内容。还要注意如何在 SQL 查询中使用占位符来防止 SQL 注入。

【讨论】：