Nodejs端代码:
这里是我整个的后端代码,前端只请求了一个 prodess_get,所以只要看那一部分代码即可。
var express = require('express');
var urlLib = require('url');
var app = express();app.use('/public', express.static('public'));app.get('/index.html', function (req, res) {res.sendFile( __dirname + "/" + "index.html" );
})
app.get('/login.html', function (req, res) {res.sendFile( __dirname + "/" + "login.html" );
})
app.get('/register.html', function (req, res) {res.sendFile( __dirname + "/" + "register.html" );
})
//数据库访问
app.get('/mysqlget', function (req, res) {})
//登录
app.get('/login_get', function (req, res) {console.log('--------------------------visit mysql----------------------------');var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '123456', port: '3306', database: 'test' }); connection.connect();var sql = 'SELECT * FROM user where name = ? and pass = ?';var addSqlParams = [req.query.first_name, req.query.last_name];//查connection.query(sql,addSqlParams,function (err, result) {if(err){console.log('[SELECT ERROR] - ',err.message);return;}if(result.length > 0){console.log('{ msg: "用户 "' + req.query.first_name + '"登陆成功" }');res.sendFile( __dirname + "/" + "index.html" );}else{console.log('{ msg: "用户 "' + req.query.first_name + '"登陆失败" }');}});connection.end();})
//账号注册
app.get('/register_get', function (req, res) {var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '123456', port: '3306', database: 'test' }); connection.connect();var addSql = 'INSERT INTO user(name,pass) VALUES(?,?)';var addSqlParams = [req.query.first_name, req.query.last_name];//增connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);console.log('插入数据失败');return;}else{console.log('插入数据成功!');} console.log('--------------------------INSERT----------------------------');//console.log('INSERT ID:',result.insertId); console.log('INSERT ID:',result); console.log('-----------------------------------------------------------------\n\n'); });connection.end();
})
app.get('/process_get', function (req, res) {console.log('--------------------------process_get----------------------------');var mysql = require('mysql'); var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '123456', port: '3306', database: 'test' }); connection.connect();var sql = 'SELECT * FROM user';//var addSqlParams = [req.query.name, req.query.pass];//查connection.query(sql,function (err, result) {if(err){console.log('[SELECT ERROR] - ',err.message);return;}var response = {"first_name":"diyunlong","last_name":"jdkal;fld"};var parms = urlLib.parse(req.url,true);console.log(parms);console.log(result);strResult =JSON.stringify(result);console.log(strResult);res.jsonp(strResult);// res.end(res.json(strResult));/* var strResult = {code:201,message:"执行失败额,玮哥哥"};strResult = JSON.stringify(strResult);res.json(strResult);*/});connection.end();// 输出 JSON 格式/*var response = {"first_name":req.query.first_name,"last_name":req.query.last_name};console.log(response);res.end(JSON.stringify(response));*/
})var server = app.listen(8081, function () {var host = server.address().addressvar port = server.address().portconsole.log("应用实例,访问地址为 http://%s:%s", host, port)})
前端代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>登录</title><script src="js/jquery-3.3.1.min.js"></script></head><body><p>登录</p><form action="http://127.0.0.1:8081/process_get" method="GET">First Name: <input id="name" type="text" name="first_name"> <br>Last Name: <input id="pass" type="text" name="last_name"> <br /><input type="submit" value="Submit"></form><button id="submit_btn"> 提 交 </button></body><script>function submitclick(){var name1 = document.getElementById("name").value;var pass1 = document.getElementById("pass").value;$.ajax({ async:true, cache:false, url: 'http://127.0.0.1:8081/process_get', type: 'get', dataType: 'jsonp',timeout: 5000, contentType: 'application/json; charset=utf-8',success:function(result){
// alert("succ") var datas = JSON.parse(result);console.log(datas[0].name)}, error:function(res){ console.log(res);alert("res") } });}document.getElementById("submit_btn").onclick = submitclick;</script>
</html>
这里推荐去看一篇文章:https://www.jianshu.com/p/3179631bd7bd
还有一篇:https://blog.csdn.net/dai_jing/article/details/46564627