Question

这是我的问题：我想把我在Java div中使用Ajax调用捕获的JSON数据。

function showEspece(espece, categorie, object) {
  $.ajax({
    type: 'POST',
    url: 'getespece.php',
    data: {
      espece: espece,
      categorie: categorie
    },
    dataType: 'json',
    success: function(data) {
      console.log(data);
      $('#output').html(data); //what i try to do but don't work
    },
    error: function(xhr, status, error) {
      console.log(error);
    }
  });
}

<div id="output"></div>

以下是变量数据包含的内容：

如何在HTML div中显示变量的内容 - 特别是在表格中？

Answer 1

您可以使用pre标记来显示JSON。

＆＃13;

var data = {"NOMA":["Chachi","Rafiki","Chakra"],"SEXE":["F","M","F"],"DATENAISSANCE":["05-MAY-15","07-JAN-15","17-SEP-17"]};
$('pre').html(JSON.stringify(data, undefined, 2));

＆＃13;

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

＆＃13;

Answer 2

您的数据变量它是一个JS对象，您需要在调用$（＆＃39; #output＆＃39;）。html（数据）之前将其转换为字符串或您想要显示的格式。你可以这样做：

function showEspece(espece, categorie, object) 
  {
    $.ajax({           
      type : 'POST',                           
      url: 'getespece.php',                  
      data: {espece: espece, categorie: categorie },                       
      dataType: 'json',                     
      success: function(data)          
      {
        console.log(data);
        data = JSON.stringify(data)     
        $('#output').html(data); //what i try to do but don't work
      },
      error: function(xhr, status, error) {
        console.log(error);
      }
    });
  }

Answer 3

作为你的json数据子元素是数组，你可以使用$ .each函数：

示例：

var noma = data.NOMA;
var html_append = '';
$.each(noma, function(key,value) {
   html_append += value +'<br>';
});

$('#output').html(html_append);

您也可以使用相同的代码data.DATENAISSANCE和data.SEXE

Answer 4

由于您返回的数据已经是JSON格式，我建议您使用$ .getJSON并在getespece.php中通过$ _GET变量更改$ _POST。

此外，您的JSON对象似乎没有正确格式化..如果要在HTML表格中显示“especes”，正确的JSON格式可能是这样的：

{
    "Columns": [
        "DateDeNaissance",
        "Nom",
        "Sexe"
    ],
    "Especes": [{
        "DateDeNaissance": "05-MAY-15",
        "Nom": "Chachi",
        "Sexe": "F"
    }, {
        "DateDeNaissance": "07-JAN-15",
        "Nom": "Rafiki",
        "Sexe": "M"
    }, {
        "DateDeNaissance": "17-SEP-17",
        "Nom": "Chakra",
        "Sexe": "F"
    }]
}

从PHP获得此输出后，将JS更改为：

$.getJSON("getespece.php", {
    espece: espece,
    categorie: categorie
})
.done(function(json) {
    // Build the html Table
    var html = "<table>\n";
        html += "<thead>\n";
        html += "<tr>\n";
    // Columns
    $.each(json.Columns, function(k, value) {
        html += "<th>" + column + "</th>\n";
    });
    html += "</tr>\n";
    html += "<tbody>\n";
    // Rows
    $.each(json.Especes, function(column, values) {
        html += "<tr>\n";
        // Cells
        $.each(values, function(k, val) {
            html += "<td>" + val + "</td>\n";
        });
        html += "</tr>\n";
    });
    html += "</tbody>\n";
    html += "</table>\n";
    $("#output").html(html);
});

Answer 5

var data = {
    DATENAISSANCE: [...],
    ...
}

var root = document.getElementById("output");
var table = element("table");
root.appendChild(table);

var dataName;
for (dataName in data) {
    if (data.hasOwnProperty(dataName)) {
        var row = element("tr", element("th", dataName));
        data[dataName].forEach(function (dataValue) {
            row.appendChild(element("td", dataValue));
        });
        table.appendChild(row);
    }
}


// Create a convenient function `element` which creates an element and sets its content
function element(nodeName, content, attributes, eventListeners) {
    var node = document.createElement(nodeName);
    appendChildren(node, content);
    return node;
}

function appendChildren(node, content) {
    var append = function (t) {
        if (/string|number/.test(typeof t)) {
            node.innerHTML += t;
        } else if (t instanceof HTMLElement) {
            node.appendChild(t);
        }
    };
    if (content instanceof Array) {
        content.forEach(function (item) {
            append(item);
        });
    } else {
        append(content);
    }
}

如何将JSON数据放入HTML div中？

5 个答案: