时间戳

首页 > 解决方案 > javascript/html + nodejs

javascript - javascript/html + nodejs

问题描述

这是一个 html 示例，它在主机上192.168.56.152使用静态 IP 地址运行。apache

<!DOCTYPE html>
<html >
    <head>
        <title>OnlinePage</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="frontend.js"></script>
    </head>
    <body>
        <header>
            <center><h1 style="margin-right: 24%;">Welcome to this page</h1></center>
        </header>
        <section class="container">
            <form action="http://192.168.56.152:8080/submit" method="post">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="firstname">Firstname</label>
                        <input type="fname" class="form-control" id="formfirstname" placeholder="First Name">
                    </div>
                <div class="form-group col-md-6">
                    <label for="lastname">Last Name</label>
                    <input type="lname" class="form-control" id="formlastname" placeholder="Last Name">
                </div>
                </div>
      
      
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="classify">Classification</label>
                        <input type="text" class="form-control" id="formclassify" placeholder="Junior">
                    </div>
                    <div class="form-group col-md-4">
                        <label for="age">Age</label>
                        <select id="inputState" class="form-control">
                            <option selected="">16</option>
                            <option>17</option>
                            <option>18</option>
                            <option>18</option>
                            <option>20</option>
                            <option>21</option>
                            <option>22</option>
                            <option>23</option>
                        </select>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="uin">UIN</label>
                        <input type="number" class="form-control" id="uin">
                    </div>
                </div>
          
                <button type="submit" class="btn btn-primary" onclick="submitByClass()"  >Submit</button>
            </form>    
        </section>
    </body>
</html>

这是CSS

button.btn.btn-primary{
    margin-left: 1.25%;
}
form {
    width: 67%;
}

body {
    background-color: rosybrown;
}

这是客户端 javascript (frontend.js)。我用它来获取表单数据，然后将其作为对象发布。

    function submitByClass() {
    var xhttp = new XMLHttpRequest();

    xhttp.open("POST", 'http://192.168.56.152/connectplus.js', true);
    //send the proper header information along with th request
    xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xhttp.onreadystatechange = function() {

        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var status = xhttp.statusText + " 4 request finished";
            console.log(status);
        }

    }
    //data gotten in javascript as an object    
    var studentData = {
        firstname: document.getElementById('formfirstname'),
        lastname: document.getElementById('formlastname'),
        classification: document.getElementById('formclassify'),
        age: document.getElementById('inputState'),
        UIN: document.getElementById('uin')
    }
    var studentDataString = JSON.stringify(studentData);
    xhttp.send(studentDataString);

}

这是nodejs（connectplus.js）。它已成功连接到数据库。

var mysql = require('mysql');
const bodyParser = require("body-parser");
const express = require('express');
const application = express();
application.use(bodyParser.urlencoded({extended: true}))
application.use(bodyParser.json());


//creating connetion to database
var connetion = mysql.createConnection(
{
    host:"localhost",
    user: "root",
    password: "password!",
    database: "student_info"
});



///connecting to the database
connetion.connect(
    function (err)
    {
        if(err) throw err;
        console.log("connection made!");
    }
);


application.post('/submit', function(req,res){
    res.send('You sent the name "' + req.body.formfirstname + '".');
});

问题

  1. 如何获取我在 frontend.js 中发送的数据到 connectplus.js？
  2. 当我点击提交时，它会显示 connectplus.js 的原始代码，我该如何阻止这种情况发生？

标签： javascripthtmlnode.js

解决方案

一旦尝试使用此代码。我希望它能解决你的问题

在 HTML 中使用这样的输入控件名称<input name='fname' />

<form action="http://192.168.56.152:8080/submit" method="post">
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="firstname">Firstname</label>
            <input type="text" name="fname" class="form-control" id="formfirstname" placeholder="First Name">
        </div>
        <div class="form-group col-md-6">
            <label for="lastname">Last Name</label>
            <input type="text" name="lname" class="form-control" id="formlastname" placeholder="Last Name">
        </div>
    </div>


    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="classify">Classification</label>
            <input type="text" name="classification" class="form-control" id="formclassify" placeholder="Junior">
        </div>
        <div class="form-group col-md-4">
            <label for="age">Age</label>
            <select id="inputState" name="state" class="form-control">
                <option selected="">16</option>
                <option>17</option>
                <option>18</option>
                <option>18</option>
                <option>20</option>
                <option>21</option>
                <option>22</option>
                <option>23</option>
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="uin">UIN</label>
            <input type="number" nam="number" class="form-control" id="uin">
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

连接加号.js

var mysql = require('mysql');

var connetion = mysql.createConnection({ //creating connetion to database
    host:"localhost",
    user: "root",
    password: "password!",
    database: "student_info"
});

connetion.connect(function (err) {
    if(err) throw err;
    console.log("connection made!");
});

module.exports = connetion;

应用程序.js

const express = require('express');
const bodyParser = require("body-parser");
const application = express();
const database = require('./connectplus');
application.use(bodyParser.urlencoded({extended: true}))
application.use(bodyParser.json());

application.post('/submit', function(req,res) {
    const firstName = req.body.fname;
    const lastName = req.body.lname;
    res.send('You sent the name "' + firstName + ' ' + lastName + '".');

    // Later you use database query like this
    // database.query('SELECT now()');
});

推荐阅读