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

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

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

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

doctype html
html
  head
    title= title
    link(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')
  body
    block content

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

extends layout

block content
  h1= title
  p 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的值了。

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