在成功實現前後臺互動和資料庫連線後，接下來就做一個前臺頁面獲取資料庫資料並區域性重新整理的功能。

這個功能需要用到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',onclick='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的值了。

當然我這裡設的值都一樣。資料庫中的值自己修改就好了。