Отправка данных JSON из Python в Javascript и доступ к ним. - PullRequest
Новая
       8

Отправка данных JSON из Python в Javascript и доступ к ним.

0 голосов
/ 24 сентября 2018

У меня есть файл Python, который получает данные из базы данных и возвращает их в форме JSON. 

import pymysql;
import json;
from flask import Flask, render_template, request, redirect, Response
app = Flask(__name__)

@app.route('/test', methods=["POST", "GET"])
def getMySQlData():
    tableData = []
    connection = pymysql.connect(host='db-auto-performancetesting',
                                 user='DBUser',
                                 password='*******',
                                 database='DbPerformanceTesting',
                                 port=3302,
                                 charset='utf8mb4',
                                 cursorclass=pymysql.cursors.DictCursor)

    try:
        with connection.cursor() as cursor:
            sql = "SELECT TestcaseName, AverageExecutionTimeInSeconds FROM PASPerformanceData WHERE BuildVersion='38.1a141'"
            cursor.execute(sql)
            while True:
                row = cursor.fetchone()
                if row == None:
                    break
                tableData.append(row)
            tableDataInJson =  json.dumps(tableData, indent=2)
            print tableDataInJson
            return tableDataInJson
    finally:
        connection.close()

if __name__ == "__main__":
    app.run()

Мне нужна помощь в сборе этих данных JSON в HTML & Javascript и использовании их в качестве диаграммыdata.

Я новичок в Javascript и Ajax.Может ли кто-нибудь помочь мне в написании ajax-вызова для файла Python из Javascript и получения возвращаемых данных JSON. 

<!DOCTYPE HTML>
<html style="height:100%;">
<head>
<style type="text/css">
body {
    overflow:hidden;
}
</style>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">

window.onload = function () {
    var chart1 = new CanvasJS.Chart("chartContainer1", {
        title:{
            text: "Launch Application"              
        },
        axisY:{
        title: "Average Execution Time(seconds)"
        },
        axisX:{
        title: "Software Version",
        labelAngle: 180
        },
        data: [              
        {
            // Change type to "doughnut", "line", "splineArea", etc.
            indexLabelFontSize: 16,
            labelFontSize: 16,
            type: "column",
            dataPoints: [
                { label: "ReleaseVersion \n (20.1a121)",  y: "**Data recieved from JSON, indexLabel**": "6.0 s" },
                { label: "PreviousVersion \n (38.1a140)", y: "**Data recieved from JSON**", indexLabel: "5.0 s"  },
                { label: "CurrentVersion \n (38.1a.141)", y: "**Data recieved from JSON**", indexLabel: "5.4 s"  }
            ]
        }
        ]
    });

Спасибо

1 Ответ

0 голосов
/ 24 сентября 2018

Итак, позвольте мне дать вам краткий обзор того, как могут работать AJAX и колба.

Допустим, у вас есть некоторые данные, которые вы получаете из базы данных, что-то вроде этого 

items=[{"id":123,"name":"abc","lastname":"xyz"}]

И вы можете хранить что-то вроде этого с небольшим фрагментом кода, который будет выглядеть примерно так: 

result = cursor.fetchall()
links = []
num = 0
for item in result:
    if links.__len__()-1 != num:
        links.append({})
    links[num]['id'] = item[0]
    links[num]['name'] = item[1]
    links[num]['lastname'] = item[2]
    #links.append({}) extra append should be created
    num += 1

Теперь интересная часть AJAX

Допустим, у вас есть простая форма, которую вы хотели быдля отправки. 

    <form id="searchForm" action="/" method="POST">
    <input type="text" id="search" name="search" placeholder="Search">
    <input type="submit" value="Search">
    </form>

Чтобы остановить действие по умолчанию для отправки, у вас может быть скрипт, который будет выглядеть примерно так: 

$(document).ready(function() {
//#addLinkForm is nothing but the id of the form (works well if you have multiple forms in your page)
    $('#addLinkForm').on('submit',function(event){
//This is where the data is sent
    $.ajax({
        url: '/adminAJAX',
        type: 'POST',
        data: $('#addLink'),
    })
//this is done when the response is received
    .done(function(data) {
        console.log("success " + data);
    });

    event.preventDefault();
});
});

Ответ будет в консоли браузера.Полученные данные можно использовать по своему усмотрению

Чтобы это работало, вам также понадобится 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

в вашем HTML-коде

И последнее.Для того, чтобы все это работало, вам также понадобится серверная часть, которая, я думаю, будет для вас флягой 

@app.route('/adminAJAX',methods=['POST'])
def adminAJAX():
#your processing logic
 items=[{"id":123,"name":"abc","lastname":"xyz"}] #just an example
 return json.dumps(items)
...