javascript - 使用 jQuery+HTML 发出 POST 请求以显示 JSON 数据

Question

我想在前端显示 json 数据，但在发布请求后，尽管它成功了，但它提供了我需要概括代码的特定数据。这是 python 代码。

import json
from flask import Flask, render_template, request, jsonify
import requests
app = Flask(__name__)

def post(url, payload):
    returnData={}

    if url == 'http://api/my-general-api':
        r = requests.post(url, data=json.dumps(payload))
    else:
        r = requests.get(url)

    #r = requests.get()
    if r.status_code == 200:
        returnData["status"] = "SUCCESS"
        returnData["result"] = json.loads(r.text)
    else:
        returnData["status"] = "ERROR"

    return returnData

def processSingleHost(perfid, hostname, iteration):
    hostsData = {}
    payload = {
        "perfid" : perfid,
        "section" : {
            "hostname" : hostname,
            "iteration" : iteration,
            "sectionname" : "sysstat_M"
            }
    }
    returnData = post('http://api/my-general-api', payload)
    payload = {
                "perfid" : perfid,
                "section" : {
                    "hostname" : hostname,
                    "iteration" : iteration,
                    "sectionname" : "sysstat_x_1sec"
                    }
            }
    returnData1 = post('http://api/my-general-api', payload)
    return {
        "status" : "SUCCESS",
        "sysstat_M" : returnData,
        "sysstat_x_1sec" : returnData1
    }

@app.route("/",methods=['GET','POST'])
def home():
    if request.method == 'POST':
        #user inputs
        value1 = request.form.get('perfid')
        value2 = request.form.get('hostname')
        value3 = request.form.get('iteration')
        #api call 
        url1 = 'http://api/my-general-api'/{0}'.format(value1)
        payload= {}
        rdata = post(url1,payload)
        hostsData = {}
        if rdata["status"] == "SUCCESS":
            for item in rdata["result"]:
                for host in item["hosts"]:
                    hostsData[host["hostname"]] = processSingleHost(value1,host["hostname"], 1)       //here hostname contain specific value for specific host
        else:
            return "";

        return jsonify(hostname=hostsData);   // returning all host values 

    return render_template('index.html')





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

这是我用于访问数据的 .js 文件:

    $(document).ready(function() {
  console.log("ready!");


  $('form').on('submit', function() { 

    console.log("the form has beeen submitted");

    // grab values
    valueOne = $('input[name="perfid"]').val();
    valueTwo = $('input[name="hostname"]').val();
    valueThree = $('input[name="iteration"]').val();


    console.log(valueOne)
    console.log(valueTwo)
    console.log(valueThree)



    $.ajax({
      type: "POST",
      url: "/",
      dataType:'json',
      data : { 'perfid': valueOne,'hostname': valueTwo,'iteration': valueThree},
      success: function(data) {



        var x = parseInt(data.hostname.sysstat_M.result.sectoutput.summarystats.Avg.AVG); //here hostname is variable I am planning to use that will help to generalize access.

        if(x>80)
            {

                var p = '<p><div class="isa_warning"><i class="fa fa-warning"></i>CPU may be overloading.</div></p>';

                $('#result').append(p);

            }
        else
            {
                var p = '<div class="isa_success"><i class="fa fa-check"></i>CPU Usage is Normal.</div><p></p>';
                $('#result').append(p);
            }


      },
      error: function(error) {
        console.log(error)
      }
    });

  });

});

$('input[type="reset"]').on('click', function(e){
    e.preventDefault();
    $('#result').empty();
})

但如屏幕截图所示，它要求我通过提供 hostname = 10.161.146.94/10.161.146.90 来专门进行访问

正如上面提到的.js

var x = parseInt(data.hostname.10.161.146.94/10.161.146.90.sysstat_M.result.sectoutput.summarystats.Avg.AVG);

但是将来这个主机名会有所不同。所以我需要对其进行概括，我能做什么，请提出建议？？

Answer 1

旁注: 如果您使用主机名或IP来识别每个客户端，则不建议这样做；因为它应该失败。

您必须使用sessions为此。

无论如何，如果您只是想在不知道 key 的情况下修改 JavaScript 代码以访问 JSON 响应:

for(key in data){
    console.log(key);
    console.dir(data[key]);
}

编辑:

使用 jQuery 在选择框中显示可以如下完成:

var options = "";
for (key in data) {
    options += '<option value="' + key + '">' + key + '</option>';
}
$("#my_dropdown").html(options);