var express = require('express');
var mysql = require('mysql');
var app = express();
app.set('view engine', 'ejs')
var connection = mysql.createConnection({
host: 'localhost',
port: '3306',
user: 'root',
password: '1012',
database: 'test'
});
connection.connect();
// var sql = 'SELECT * FROM websites WHERE id = 2';
var sql = 'SELECT * FROM websites';
var str = '';
var res = {}
connection.query(sql, function(err, result) {
if(err) {
console.log('[SELECT ERROR]:', err.message);
}
str = JSON.stringify(result);
res = {
data: JSON.parse(str)
}
console.log(res)
});
app.get('/', function(request, response) {
// GET 请求不存在请求实体部分,因此请求头不需要设置 Content-Type 字段
// Content-Type 标头告诉客户端实际返回的内容的内容类型。
// response.set('Content-Type', 'application/json')
console.log(request.url)
// response.setHeader('Content-type','text/plain;charset=utf-8')
// response.header("Content-Type", "application/json;charset=utf-8");
// res.send(str)
// response.type('html');
// 第一个参数是视图的名称，如果是.ejs文件，必须省略后缀名，如果是.html,.jsp,.abc,.def等自己定义的后缀名时，必须加后缀。
// 第二个参数是视图需要的数据
response.render('index', res)
// response.send({res:'ok'})
// response.end()
// 如果服务器端没有数据返回到客户端,那么就可以用 res.end
// 如果服务器端有数据返回到客户端,这个时候必须用res.send ,不能用 res.end（会报错）
// 大多数情况下，渲染内容用res.render()，将会根据views中的模板文件进行渲染。如果不想使用views文件夹，想自己设置文件夹名字，那么app.set("views","aaaa");
// 如果想写一个快速测试页，当然可以使用res.send()。这个函数将根据内容，自动帮我们设置了Content-Type头部和200状态码。send()只能用一次，和end一样。和end不一样在哪里？能够自动设置MIME类型。
});
connection.end();
app.listen(3000, function() {
console.log('Server running at 3000 port');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
id:<input type="text" id="query-id">
name:<input type="text" id="query-name">
url:<input type="text" id="query-url">
alexa:<input type="text" id="query-alexa">
country:<input type="text" id="query-country">
<button id="btn">查询</button>
</div>
<table border="1" rules="all">
<thead>
<th>id</th>
<th>name</th>
<th>url</th>
<th>alexa</th>
<th>country</th>
</thead>
<tbody>
<%for(var i = 0; i < data.length; i++) {%>
<tr>
<td><%=data[i].id%></td>
<td><%=data[i].name%></td>
<td><%=data[i].url%></td>
<td><%=data[i].alexa%></td>
<td><%=data[i].country%></td>
</tr>
<%}%>
</tbody>
</table>
</body>
</html>
<script>
var btn = document.getElementById('btn')
// 打印html
// function ajax(type, url, async, func) {
// var xhr = new XMLHttpRequest()
// xhr.onreadystatechange = function() {
// if(xhr.status === 200 && xhr.readyState === 4) {
// func(xhr.responseText)
// }
// }
// xhr.open(type, url, async)
// xhr.send()
// }
// btn.onclick = function() {
// ajax('get', 'http://localhost:3000/', true, function(res) {
// console.log(res)
// })
// }
// 报错
function ajax1(type, url, async) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if(xhr.status === 200 && xhr.readyState === 4) {
resolve(xhr.responseText)
} else {
reject(new Error(xhr.statusText))
}
}
xhr.open(type, url, async)
xhr.send()
})
}
// 打印html
function ajax2(type, url, async) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest()
// 只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了。
xhr.onload = function() {
if(xhr.status === 200) {
resolve(xhr.responseText)
} else {
reject(new Error(xhr.statusText))
}
}
xhr.open(type, url, async)
xhr.send()
})
}
btn.onclick = function() {
ajax2('get', 'http://localhost:3000/', true).then(res => {
console.log(res)
}).catch((error) => {
console.log(error)
})
}
// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪
// Http状态码
// 200-服务器成功返回网页
// 404-请求的网页不存在
// 503-服务器暂时不可用
</script>
