jquery - 如何从 Jquery 中读取 python 字典？-6ren

jquery - 如何从 Jquery 中读取 python 字典？

转载作者：太空宇宙更新时间：2023-11-04 14:53:33

我的 python 函数为我的 Jquery GET 调用返回一个字典值。

{'Site4': {'machine': 'null', 'state': 'unprocessed'}, 'Site2': {'machine': 'null', 'state': 'unprocessed'}, 'Site3': {'machine': 'null', 'state': 'unprocessed'}, 'Site1': {'machine': 'null', 'state': 'unprocessed'}}

我想在 html 表中分别显示站点/机器/状态值。我从我的 GET 调用中得到了整个字典。

我的 Jquery 函数是；如下

function loadDoc() {
    var request;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        request = new ActiveXObject('Msxml2.XMLHTTP');
      } 
      catch (e) {
        try {
          request = new ActiveXObject('Microsoft.XMLHTTP');
        } 
        catch (e) {}
      }
    }
    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
             var myObject = JSON.parse(this.responseText);
             alert(myObject);
          document.getElementById("demo").innerHTML =
          this.responseText;
        }
      };
    request.open('GET', 'http://localhost:8080/cache/getSite?clientName=testclient', true);
    request.send();
}

上面的 JSON.parse 没有解析字典。如何在 jquery 中读取 python 字典值并显示在包含站点/机器/状态的 3 列的表中？

我的html是;

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
<meta charset="UTF-8">
<title>Client Site Info</title>
</head>
<body>
<p id="demo"><button type="button" onclick="loadDoc()">load sites</button></p>
<table style="width:100%">
<caption>Client Site Info</caption>
  <tr>
    <th>Sites</th>
    <th>Machines</th> 
    <th>ProcessingState</th>
  </tr>
</table>
</body>

最佳答案

为了测试环境，我设置了一个 flask 应用程序。为了使 JSON.parse 在 jQuery 中正常工作，我在 python 文件中使用了 json.dumps。以下是文件:

app.py:

import json
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
@app.route('/data')
def get_data():
    data = {'Site4': {'machine': 'null', 'state': 'unprocessed'}, 'Site2': {'machine': 'null', 'state': 'unprocessed'}, 'Site3': {'machine': 'null', 'state': 'unprocessed'}, 'Site1': {'machine': 'null', 'state': 'unprocessed'}}
    return json.dumps(data)

@app.route('/table')
def show_table():
    return render_template("table.html")


if __name__ == '__main__':
    app.run(debug=True)

在 templates 文件夹中，table.html 包含:

<!DOCTYPE html>
<html>
<head>
    <style>
    table, th, td {
        border: 1px solid black;
    }
</style>
<meta charset="UTF-8">
<title>Client Site Info</title></head>
<body>
    <p id="demo"><button type="button" onclick="loadDoc()">load sites</button></p>
    <table style="width:100%" id="table_data">
        <caption>Client Site Info</caption>
        <tr>
            <th>Sites</th>
            <th>Machines</th> 
            <th>ProcessingState</th>
        </tr>
    </table>
    <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">
</script>
<script type="text/javascript">
    function loadDoc() {
        var request;
            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                request = new XMLHttpRequest();
            } else if (window.ActiveXObject) { // IE
                try {
                    request = new ActiveXObject('Msxml2.XMLHTTP');
                } 
                catch (e) {
                    try {
                        request = new ActiveXObject('Microsoft.XMLHTTP');
                    } 
                    catch (e) {}
                }
            }
            request.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var myObject = JSON.parse(this.responseText);
                    for(key in myObject){
                        new_row = "<tr>";
                        new_row += "<td>";
                        new_row += key;
                        new_row += "</td>";
                        new_row += "<td>";
                        new_row += key["machine"];
                        new_row += "</td>";
                        new_row += "<td>";
                        new_row += key["state"];
                        new_row += "</td>";
                        new_row += "</tr>";
                        $('#table_data tr:last').after(new_row);
                    }
                }
            };
            request.open('GET', 'http://127.0.0.1:5000/data', true);
            request.send();
        }
    </script>
</body>
</html>