项目结构
就是建立app.js 和 index.html 然后安装一个express
app.js
var express = require('express');
var app = express();
//这里就是跨域用的,因为你用ajax请求的话是需要跨域的,因为不是在同一个域里,不懂的话可以百度一下,反正这里不理
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', '*');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
app.get('/', function (req, res) {
console.log("主页");
res.send('后台主页');
})
app.get('/api', function (req, res) {
console.log("假设这里是api接口");
res.send({message:'后台传来的数据',success:true}); //这里就是传回给前台的数据呀,我这里是 ‘{message:'后台传来的数据',success:true}’,等等你注意前台接收
})
var server = app.listen(8081, function () {
console.log('running at port 8081')
})
记住要启动这个先,因为我没有用前端模板引擎,所以先启动这个app.js ,然后在用浏览器打开index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
</head>
<body>
<button id="btn">请求数据</button>
<script>
$('#btn').click(function(){
$.get('http://127.0.0.1:8081/api',{message:'这是传到后台的数据'},function(data,status){//这是一个回调函数
console.log(data);//这样就是打印我们刚刚的{message:'后台传来的数据',success:true}
console.log(data.message + '|' + data.success);
})
})
</script>
</body>
</html>
按下F12 点击请求数据,看控制台:
试一下这个。晚安!!