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. 效果展示

總結

以上是生活随笔為你收集整理的bottle+jquery 前后端分离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。