python with flask get和post方法使用ajax

时间:2016-09-18 20:07:08

标签: javascript jquery python html flask

我目前正在开发一个食品卡路里网络应用程序,我想将mongoDB中的数据提取到HTML表格中。

我的python代码是:

<?php
session_start(); 
if (isset($_POST['submit'])){
echo $_SESSION["userid"];
$userid = $_SESSION["userid"];
$con=mysqli_connect("localhost","root","","login")or die("Unable to connect to MySQL");
 $caption = $_POST['Caption'];


 $imageName = mysqli_real_escape_string($con,$_FILES["fileToUpload"]["name"]);
$imageData = mysqli_real_escape_string($con,file_get_contents($_FILES["fileToUpload"]["tmp_name"]));
$imageType  = mysqli_real_escape_string($con,$_FILES["fileToUpload"]["type"]);
echo $imageName;
echo $imageType;
if(substr($imageType,0,5) == "image"){
$stmt = mysqli_prepare($con, "INSERT INTO user_image (userid,timestamp, image, image_name,caption) VALUES (?,now(), ?, ?,?)");
if ($stmt === false) {
trigger_error('Statement failed! ' . htmlspecialchars(mysqli_error($con)), E_USER_ERROR);
}
$bind = mysqli_stmt_bind_param($stmt, "isss", $userid,$imageData, $imageName, $caption);
if ($bind === false) {
trigger_error('Bind param failed!', E_USER_ERROR);}
$exec = mysqli_stmt_execute($stmt);
if ($exec === false) {
trigger_error('Statement execute failed! ' . htmlspecialchars(mysqli_stmt_error($stmt)), E_USER_ERROR); }
 }
else
{
echo " only images are allowed";}
}
$con->close();
?>

我的HTML文件是:

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)

目前,我已成功设法以json,字典格式将mongoDB中的数据导入烧瓶。

我需要的是将我的数据导入HTML表格。

我怎样才能实现它?

1 个答案:

答案 0 :(得分: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));