使用jQuery+HTML发出POST请求以显示JSON d

Question

我想在前端显示json数据，但在post请求后，虽然它是成功的，但它给出了具体的数据，我需要概括的代码。这个是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

旁注： 如果您使用hostname或IPs来标识每个客户机，那么它就没有被通知；因为它应该失败。

你必须使用sessions。你知道吗

总之，如果您只是想知道如何在不知道键的情况下修改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);