在 asp.net mvc 中使用 ajax 显示复杂的 JSON 数据
Posted
技术标签:
【中文标题】在 asp.net mvc 中使用 ajax 显示复杂的 JSON 数据【英文标题】：Displaying Complex JSON data using ajax in asp.net mvc 【发布时间】：2020-11-29 15:05:15 【问题描述】：我的 ajax 函数中有这个 JSON 数据
[
"Point": "Point1",
"Picture": "~/Images/PointPicuters/63732413181952695092b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
"ReadingList": [
"MeterReading": 1377.00,
"fuel": "Desail"
,
"MeterReading": 860.00,
"fuel": "Petrol_95"
]
,
"Point": "Point2",
"Picture": "~/Images/PointPicuters/637324131917954300a.png",
"ReadingList": [
"MeterReading": 1454.00,
"fuel": "Petrol_95"
]
,
"Point": "Point3",
"Picture": "~/Images/PointPicuters/637324131996312029a.png",
"ReadingList": [
"MeterReading": 732.00,
"fuel": "Petrol_95"
]
,
"Point": "point4",
"Picture": "~/Images/PointPicuters/637324132089900045aeafb6ed4e4da99584c3eaa085976b65_medium.jpg",
"ReadingList": [
"MeterReading": 677.00,
"fuel": "Petrol"
,
"MeterReading": 6666.00,
"fuel": "GasLocal"
]
,
"Point": "point5",
"Picture": "~/Images/PointPicuters/63732413217155094892b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
"ReadingList": [
"MeterReading": 677.00,
"fuel": "Petrol"
,
"MeterReading": 6666.00,
"fuel": "LPG"
,
"MeterReading": 677.00,
"fuel": "GasLocal"
]
]
我试图用不同的 html 元素中的数据显示每个点
【问题讨论】：
好的。当前代码（或特定问题）是..？ （也许：搜索“javascript charting library”。） 【参考方案1】：(function()
var dataJson = ["Point":"Point1","Picture":"~/Images/PointPicuters/63732413181952695092b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg","ReadingList":["MeterReading":1377.00,"fuel":"Desail","MeterReading":860.00,"fuel":"Petrol_95"],"Point":"Point2","Picture":"~/Images/PointPicuters/637324131917954300a.png","ReadingList":["MeterReading":1454.00,"fuel":"Petrol_95"],"Point":"Point3","Picture":"~/Images/PointPicuters/637324131996312029a.png","ReadingList":["MeterReading":732.00,"fuel":"Petrol_95"],"Point":"point4","Picture":"~/Images/PointPicuters/637324132089900045aeafb6ed4e4da99584c3eaa085976b65_medium.jpg","ReadingList":["MeterReading":677.00,"fuel":"Petrol","MeterReading":6666.00,"fuel":"GasLocal"],"Point":"point5","Picture":"~/Images/PointPicuters/63732413217155094892b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg","ReadingList":["MeterReading":677.00,"fuel":"Petrol","MeterReading":6666.00,"fuel":"LPG","MeterReading":677.00,"fuel":"GasLocal"]];
var e_list = document.getElementById("myList");
for (var i in dataJson)
console.info(dataJson[i].Point);
var node = document.createElement("li");
var textPoint = document.createTextNode(dataJson[i].Point);
var img = document.createElement('img');
img.src = dataJson[i].Picture;
node.appendChild(textPoint);
node.appendChild(img);
var list = document.createElement("ul");
for (var j in dataJson[i].ReadingList)
var nodeChild = document.createElement("li");
var textPointChild1 = document.createTextNode(dataJson[i].ReadingList[j].MeterReading);
nodeChild.appendChild(textPointChild1);
var textPointChild2 = document.createTextNode(dataJson[i].ReadingList[j].fuel);
nodeChild.appendChild(textPointChild2);
list.appendChild(nodeChild);
node.appendChild(list);
e_list.appendChild(node);
)()
【讨论】：
【参考方案2】：您可以使用DataTable 来帮助您完成任务：
HTML：
<h3>Table</h3>
<table id="data_table">
</table>
JavaScript：
var json_data =
json: JSON.stringify(
"data": [
"Point": "Point1",
"Picture": "~/Images/PointPicuters/63732413181952695092b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
"ReadingList": [
"MeterReading": 1377,
"fuel": "Desail"
,
"MeterReading": 860,
"fuel": "Petrol_95"
]
,
"Point": "Point2",
"Picture": "~/Images/PointPicuters/637324131917954300a.png",
"ReadingList": [
"MeterReading": 1454,
"fuel": "Petrol_95"
]
,
"Point": "Point3",
"Picture": "~/Images/PointPicuters/637324131996312029a.png",
"ReadingList": [
"MeterReading": 732,
"fuel": "Petrol_95"
]
,
"Point": "point4",
"Picture": "~/Images/PointPicuters/637324132089900045aeafb6ed4e4da99584c3eaa085976b65_medium.jpg",
"ReadingList": [
"MeterReading": 677,
"fuel": "Petrol"
,
"MeterReading": 6666,
"fuel": "GasLocal"
]
,
"Point": "point5",
"Picture": "~/Images/PointPicuters/63732413217155094892b303664ee99cdf1b59e577c3c98609_gas-pump-clip-free-download-on-clipartmag_960-1024.jpeg",
"ReadingList": [
"MeterReading": 677,
"fuel": "Petrol"
,
"MeterReading": 6666,
"fuel": "LPG"
,
"MeterReading": 677,
"fuel": "GasLocal"
]
]
),
"delay": 2
;
var table = $('#data_table').DataTable(
ajax:
type: 'POST',
url: '/echo/json/',
data: json_data
,
columns: [
"data": "Point" ,
"data": "Picture" ,
"data": "ReadingList[].MeterReading" ,
"data": "ReadingList[].fuel"
]
);
结果：
你可以测试there
如果你想要标题，标题.....只需调整你的 html 文件
【讨论】：
以上是关于在 asp.net mvc 中使用 ajax 显示复杂的 JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章
ASP.Net MVC Recaptcha Jquery Ajax 问题
如何通过在 ASP.NET MVC 框架中调用 ajax 来显示 kendoDropDownList？
在 Modal asp.net mvc 中使用 ajax 添加数据