javascript - Node.js:单击注册按钮不执行任何操作
问题描述
有一个简单的 express.js 应用程序,它必须连接到 mysql 数据库,然后从用户那里获取信息以在数据库中注册。虽然应用程序正确连接到数据库,但在注册按钮点击时没有执行任何操作。这是我的代码
应用程序.js
var express = require("express");
var login = require('./routes/register');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static(__dirname + "/static"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
var path = require('path');
//app.set('views', path.join(__dirname, 'static/views'));
//app.use('/scripts', express.static(path.join(__dirname, 'node_modules')));
//app.use(express.static(path.join(__dirname, 'static')));
var engines = require('consolidate');
app.engine('html', engines.mustache);
app.set('view engine', 'html');
var router = express.Router();
app.get('/',function (req,res) {
res.sendFile(__dirname + '/static/register.html');
});
router.post('/register',register.register);
app.use('/api', router);
app.listen(5000);
注册.js
var express = require("express");
var router = express.Router();
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'root',
database : 'CREBA'
});
connection.connect(function(err){
if(!err) {
console.log("Database is connected ... nn");
} else {
console.log("Error connecting database ... nn");
}
});
exports.register = function(req,res){
// console.log("req",req.body);
var USER={
"NAME":req.body.firstname,
"FAMILY":req.body.lastname,
"ID":req.body.personaly,
"POS":req.body.position
}
connection.query('INSERT INTO USER SET ?',USER, function (error, results, fields) {
if (error) {
console.log("error ocurred",error);
console.log({
"code":400,
"failed":"error ocurred"
})
}else{
console.log('The solution is: ', results);
console.log({
"code":200,
"success":"user registered sucessfully"
});
}
});
}
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Node Js APP</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1 id="header">Node JS APP</h1><span id="auth" class="label label-info"> -- </span>
<div id="authBox">
<div style="width: 40% ; margin: auto ; display: inline-block ; margin-left: 5%">
<h3> Login </h3>
<div> <span>first</span><input class="form-control" id="firstname"> </div>
<div> <span>last</span> <input class="form-control" id="lastname"> </div>
<div> <span>last</span> <input class="form-control" id="personaly"> </div>
<div> <span>last</span> <input class="form-control" id="position"> </div>
<button style="margin: 5px" class="btn btn-primary" id="register"> register </button>
</div>
<div style="width: 40% ; margin: auto ; display: inline-block ; margin-left: 5%" >
<h3> Sign Up </h3>
<div><span> Username</span><input class="form-control" id="signUpUser"> </div>
<div><span> Password </span> <input class="form-control" id="signUpPass"> </div>
<button style="margin: 5px" class="btn btn-primary" id="signUp"> Sign Up !</button>
</div>
</div>
</div>
</div>
<div class="alert alert-danger" style="text-align: center ; "></div>
<div class="alert alert-success" style="text-align: center ;"></div>
<div style="text-align: center ; border: 1px solid #e2e2e2 ; margin: 20px " id="cmBox">
<div style="width:75% ; padding: 20px ; margin: auto "><span> Enetr Comment: </span> <input class="form-control" id="msg"> </div>
<button class="btn btn-success" id="submitComment"> Submit </button>
<ul id="commentBox" class="list-group" style="margin: 25px 20%">
</ul>
</div>
主页.js
$(document).ready(function () {
var isAuth = false ;
var errorBox = $("div.alert-danger") ;
var successBox = $("div.alert-success") ;
successBox.slideUp(1);
errorBox.slideUp(1);
console.log(successBox);
$("#register").click(function () {
console.log({ firstname : $("#firstname").val() ,lastname : $("#lastname").val() , personaly : $("#personaly").val() ,POS : $("#POS").val() }) ;
$.post("/register" , { username : $("#firstname").val() ,password : $("#lastname").val ,( "#personaly").val() ,POS : $("#POS").val() } , function (data) {
if (data['status']) {
successBox.slideUp(1);
errorBox.slideUp(1);
successBox.html(data['msg']).slideDown(500) ;
getInfo() ;
}
else {
successBox.slideUp(1);
errorBox.slideUp(1);
errorBox.html(data['msg']).slideDown(500) ;
getInfo() ;
}
})
}) ;
getInfo() ;
}) ;
解决方案
我怀疑你有一个404 Not found
;)(虽然不确定,但据我所知)。
您的快递应用程序中的这些行:
router.post('/register',register.register);
app.use('/api', router);
我有一段时间没有使用 express,但据我回忆,这意味着在您的客户端应用程序中,您应该调用/api/register
而不是/register
.
试试这个:$.post("/api/register" ...
在你的home.js
文件中。
此外,注意:
您在 express 服务器中的 post 处理程序以这种方式读取 position 参数:
req.body.position
但是客户端发送它POS
,而不是position
,因此,位置值可能总是undefined
在您的服务器中。
推荐阅读
- linux - 我想以某种方式获得Linux中文件的唯一标识符,有什么想法吗?
- python - 如何根据用户输入的内容打印一个多面体的体积?
- codeigniter - CodeIgniter 控制器实例化:什么时候发生?
- swift - Alamofire 和响应 allHTTPHeaderFields 问题
- c# - 在 discord.net 中,如何让所有消息每分钟自动删除?
- terminal - PhpStorm 不断打开默认的 macOS 终端
- assembly - linux 32位汇编到C编程转换
- reactjs - React 上下文中的函数和重新渲染
- python - KNeighborsClassifier 中的 k 值
- python - 使 Python 3.6.6 使用 python3 而不是 python 运行