bottle+jquery 前後端分離

1. bottle 後端

@route('/', method=['GET', 'POST'])
def index():
    if request.method == 'GET':
        return jinja2_template('templates/index.html')
    if request.method == 'POST':
        data = {
            "result": "success",
            "product":
                [
                    {"pid": 1, "title": "水杯", "price": 12},
                    {"pid": 2, "title": "裙子", "price": 12},
                    {"pid": 3, "title": "透氣涼鞋", "price": 35}
                ]
        }
        return json.dumps(data)

2. 使用jquery請求數據

$(function () {
    $.ajax({
        url: '/',
        type: 'POST',
        dataType: 'json',
        data: {
            'username': '520'
        },
        success: function (res) {
            $("#pro").html('');
            // alert(res.result)
            var json = eval(res)
            $.each(json.product, function (index, value) {
                var pid = json.product[index].pid;
                var title = json.product[index].title;

                $("#pro").html($("#pro").html() + this.pid + '' + this.title + '</br>')
            })
        },
        error: function () {
            alert('失敗')
        }
    });
});

3. 前端代碼

<div>
    <ul>
        <li id="pro">

        </li>
    </ul>
</div>

4. 抓包

5. 效果展示