前端如何提交数据到后台
项目结构
project/
server.js
static/
css/
js/
img/
views/
index.html
..
node_moudules/
server.js是我们入口文件
static/ 静态文件存放的地方
views/ 模板文件存放的地方
json是一数据格式, 它的作用是用户服务器通信
{
"a": 1,
"b": "a"
}
是一个字符串
js中怎么处理json
JSON.parse
将json字符串转化成js对象
var json = '{"key": "value", "key2": 1}';
var obj = JSON.parse(json);
console.log(obj.key);
ajax 使用
客户端请求
<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
<script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="">
<p class="des">【京东配送】致奥T200 迷你蓝牙耳机 4.0 入耳式无线运动车载耳机立体声商务通用型蓝牙 黑色</p>
<span class="price">$49.90</span>
</div>
</div>
<div class="col-md-4">
<div class="">
<p class="des">【京东配送】致奥T200 迷你蓝牙耳机 4.0 入耳式无线运动车载耳机立体声商务通用型蓝牙 黑色</p>
<span class="price">$49.90</span>
</div>
</div>
<div class="col-md-4">
<div class="">
<p class="des">【京东配送】致奥T200 迷你蓝牙耳机 4.0 入耳式无线运动车载耳机立体声商务通用型蓝牙 黑色</p>
<span class="price">$49.90</span>
</div>
</div>
</div>
<button class="btn btn-success btn-block">加载更多</button>
</div>
<script>
// ajax 异步请求用的
//不会刷新页面
$('button').click(function(){
//新的访问形式而已
$.ajax({
url: 'http://127.0.0.1:3000/product',
type: 'GET',
//当请求成功是调用
success: function(data){
//data 请求服务器的响应主体
$('.row').append(data);
}
})
})
</script>
</body>
</html>
服务器端
var koa = require('koa');
var router = require('koa-router')();
var views = require('co-views');
var parse = require('co-body');
var logger = require('koa-logger');
var render = views('./views', {
map: {html: 'swig'}
});
router.get('/', function*(){
this.body = yield render('index.html');
});
router.get('/product', function*(){
this.body = yield render('product.html');
});
var app = koa();
app.use(logger());
app.use(router.routes());
app.listen(3000);
