12.30前端如何提交数据到后台

作者: overisover | 来源:发表于2016-12-30 18:47 被阅读0次

12.30前端如何提交数据到后台
400和401、403等http状态码
js笔记四十三之json操作及DOM回流
vue中的跨域解决方法
vue 跨域解决方法
Vue跨域解决方法
SpringMVC-接收表单数据的方式
iOS线上紧急bug修复
SpringMVC后台token防重复提交解决方案
前端面试06：补充 400 和 401、403 状态码

前端如何提交数据到后台

项目结构

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="">
                ![](https://img.haomeiwen.com/i3780749/5af2bd8fd2397e0c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                <p class="des">【京东配送】致奥T200 迷你蓝牙耳机 4.0 入耳式无线运动车载耳机立体声商务通用型蓝牙 黑色</p>
                <span class="price">$49.90</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="">
                ![](https://img.haomeiwen.com/i3780749/5af2bd8fd2397e0c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                <p class="des">【京东配送】致奥T200 迷你蓝牙耳机 4.0 入耳式无线运动车载耳机立体声商务通用型蓝牙 黑色</p>
                <span class="price">$49.90</span>
            </div>
        </div>
        <div class="col-md-4">
            <div class="">
                ![](https://img.haomeiwen.com/i3780749/5af2bd8fd2397e0c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                <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);