Re:Programmer 从零开始的Node.js（6）

在成功实现前后台交互和数据库连接后，接下来就做一个前台页面获取数据库数据并局部刷新的功能。

这个功能需要用到ajax，所以直接在前台导入jquery文件，方便处理页面。

首先，将views文件夹下的layout.jade文件添加jquery链接，代码：

doctype html
htmlheadtitle= titlelink(rel='stylesheet', href='/stylesheets/style.css')script(type='text/javascript',src='/javascripts/test.js')script(type='text/javascript',src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js')bodyblock content

将index.jade中的代码进行更改：

extends layoutblock contenth1= titlep Welcome to #{title}form(action="/jump",method="get")<input type="submit" value="跳转">input(type='text' id='test1')input(type='button',οnclick='test()' value='获取姓名')#div null

然后，在项目目录中的public文件夹下的javascripts文件夹中，新建一个名为test.js的javascript文件，代码：

function test(){var i = $('#test1').val();$.ajax({url:'/test',type:'POST',success:function(data){$('#div').html(data[i].lastname);}});
}

修改index.js文件

var express = require('express');
var router = express.Router();/* GET home page. */
router.get('/', function(req, res, next) {res.render('index', { title: 'Express' });
});
//页面跳转
router.get('/jump',function(req,res,next){res.render('newPage',{title:'NewPage'});
});
//ajax
router.post('/test',function(req,res,next){var mySql = require('./mysql');mysql = new mySql(function(result){res.send(result);});
});
module.exports = router;

最后，修改mysql.js文件：

function mySql(callback){var mysql = require('mysql');var connection = mysql.createConnection({host:'localhost',user:'root',password:'123456',database:'test'});connection.connect();var sql = 'SELECT * FROM users';connection.query(sql,function(err,result){if(err){console.log('[SELECT ERROR] - ',err.message);return;}callback(result);});connection.end();
}
module.exports=mySql;

数据库里面的数据：

运行项目，主页：

在输入框中输入1，点击获取姓名：

可以看到，页面上的null变成了数据库中第一条数据对应的lastname的值了。

当然我这里设的值都一样。数据库中的值自己修改就好了。