使用ajax的Python flask get和post方法

python with flask get and post methods using ajax

本文关键字：post 方法 get flask ajax Python 使用      更新时间：2023-09-26

我目前正在开发一个食物卡路里web应用程序，我想从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获得数据到flask在json，字典格式。

我需要的，是得到我的数据到HTML表。

我怎样才能实现它?

对于当前的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 Schema:

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));
相关文章：