python與flask get和post方法使用ajax

Question

我目前正在開發一個食物卡路里網絡應用程序，我想從 mongoDB 中提取數據到一個 HTML 表中。

我的python代碼是：

from flask import Flask
from flask import request
import requests
from wtforms import Form, BooleanField, StringField, PasswordField, validators
from flask import render_template, jsonify
import os
from flask import Markup
from contextlib import suppress
from collections import defaultdict
import operator
import re
from collections import Counter
import random
import math
import collections
import pymongo
from pymongo import MongoClient
from flask_table import Table, Col



app = Flask(__name__)

#jsonify(result=str(test[0]))



@app.route('/')
def index():
    return render_template('index.html')


@app.route('/_foods')
def add_numbers():
    connection = MongoClient('<connection string>')
    db = connection.foodnutr

    a = request.args.get('a', 0, type=str)
    test=[]
    for i in db.foods.find( {"Description":{'$regex': a}}):
            test.append(i)

    items = [test[0]["Description"]]



    return jsonify(result=str(test[0]['Description']))




if __name__ == '__main__':
    app.run(host='127.0.0.1', port=2490,debug=True)

我的 HTML 文件是：

 <!DOCTYPE html> <html lang="en"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <script type=text/javascript> $(function() { $('#calculate').bind('click', function() { $.getJSON('/_foods', { a: $('input[name="a"]').val() }, function(data) { $("#result").text(data.result); }); return false; }); }); </script> </head> <body> <div class="container"> <div class="header"> <h3 class="text-muted">Enter a food</h3> </div> <hr/> <div> <p> <input type="text" size="5" name="a" > <input type="submit" value="Submit" onclick="myFunction()" id="calculate"> </form> </div> </div> <table id="result"> <tr> <th>id</th> <th>result</th> </tr> </table> </body> </html>

目前，我已經成功地將 mongoDB 中的數據以 json 和字典格式獲取到燒瓶中。

我需要的是將我的數據放入 HTML 表格中。

我怎樣才能實現它？

Answer 1

對於您當前的 JSON，請使用以下代碼：

 $(function() {
    $('#calculate').bind('click', function() {
        $.getJSON('/_foods', {
            a: $('input[name="a"]').val()
        }, function(data) {
            for (key in data) {
                $('#result').append('<tr><td>' + key + '</td><td>' + data[key] + '</td></tr>')
            }
        });
        return false;
    });
});

但實際上這不是很好的實現方法。 最好更改您的 JSON 並使用http://json2html.com/ jQuery 插件來構建表。

更好的 JSON 架構：

var data = [{
    "name": "Protein(g)Per Measure",
    "value": 22.6
}, {
    "name": "Sugars, total(g)Per Measure",
    "value": 5.72
} {
    "name": "Vitamin E (alpha-tocopherol)(mg)Per Measure",
    "value": 0.0
}]

在這種情況下，建議使用 JSON2HTML：

var transform = {"tag":"table", "children":[
    {"tag":"tbody","children":[
        {"tag":"tr","children":[
            {"tag":"td","html":"${name}"},
            {"tag":"td","html":"${value}"}
        ]}
    ]}
]};

$('#result').html(json2html.transform(data,transform));

python與flask get和post方法使用ajax

問題描述

1 個解決方案

解決方案1
1 已采納 2016-09-18 21:02:51

python與flask get和post方法使用ajax

問題描述

1 個解決方案

解決方案1 1 已采納 2016-09-18 21:02:51

解決方案1
1 已采納 2016-09-18 21:02:51