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

Question

我正在尝试创建一个网页，用户在其中输入一个ID号到一个超文本标记语言表单中，该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>

Answer 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
        })
}

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