Question

我使用json代码在ajax中包含数据。现在我想在div中显示数据。下面是我带来的代码

{  
   "Table":[  
      {  
         "APP_MST_ID":321.0,
         "APPLICATIONNAME":"R-Locator for Enterprise",
         "PROJECTNO":"R4G-25-APD-006",
         "VSS_FOLDER_LOC":null,
         "CAT_ID":1.0,
         "SPOC_APPUSRID":79.0,
         "SUPPORT_TEAM":"0",
         "REQUESTED_BY_APPUSRID":51.0,
         "DELIVERY_MANAGER_APPUSRID":43.0,
         "CREATEDBY_APPUSRID":null,
         "CREATEDDATE":null,
         "MODIFIEDBY_APPUSRID":null,
         "MODIFIED_DATE":null,
         "APPIMAGEPATH":null,
         "PARENT_APP_ID":null,
         "SERVER_LOCATION":null,
         "USAGE_CATID":null
      }
   ]
}

和div。

<div id="dvTable">                       
</div>

下面的数据是代码。

function SearchInfo() {

        var textBoxValue = $('#addresSearch').val();

        $.ajax({
            type: "POST",
            url: "http://localhost:11181/Search/GetFilterSearch",
            data: JSON.stringify({ textBoxValue: textBoxValue }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                // display data in div here
            }
        })
    }

现在我应该如何在div中显示json中的数据并显示它。

Answer 1

你可以循环：

$(document).ready(function(){
    /*
	var r = {  
	   "Table":[  
		  {  
			 "APP_MST_ID":321.0,
			 "APPLICATIONNAME":"R-Locator for Enterprise",
			 "PROJECTNO":"R4G-25-APD-006",
			 "VSS_FOLDER_LOC":null,
			 "CAT_ID":1.0,
			 "SPOC_APPUSRID":79.0,
			 "SUPPORT_TEAM":"0",
			 "REQUESTED_BY_APPUSRID":51.0,
			 "DELIVERY_MANAGER_APPUSRID":43.0,
			 "CREATEDBY_APPUSRID":null,
			 "CREATEDDATE":null,
			 "MODIFIEDBY_APPUSRID":null,
			 "MODIFIED_DATE":null,
			 "APPIMAGEPATH":null,
			 "PARENT_APP_ID":null,
			 "SERVER_LOCATION":null,
			 "USAGE_CATID":null
		  }
	   ]
	};
    */

    //Empty rows
    var r = {  
	   "Table":[]
	};
	
	var html = '';

    //Check if has data
    if ( r.Table.length !== 0 ) {
	html += '<table>';
	
	for ( var key in r.Table ) {
		var row = r.Table[key];

		//For the header
		if ( key == 0 ) {
		html += '<tr>';
		for ( var key2 in row ) {
			  html += '<th>';
			  html += key2;
			  html += '</th>';
		}
		html += '</tr>';
		}


		html += '<tr>';
		for ( var key2 in row ) {
			html += '<td>';
			html += row[key2];
			html += '</td>';
		}
		html += '</tr>';
	}
	
	html += '</table>';
   } else {
       //No data.
       html += "No data.";
   }
	
	$( "#dvTable" ).html( html );
	
	//console.log();
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="dvTable"></div>

Answer 2

有多种方法，其中一种方法是在div中添加一个表格标记并在其中添加行，例如：

    $.each(r,function(index,value){
var html = '<td>'+
            '<tr>'+value.APP_MST_ID+'</tr>'+
'<tr>'+value.APPLICATIONNAME+'</tr>'+
'<tr>'+value.PROJECTNO+'</tr>'+
'<tr>'+value.VSS_FOLDER_LOC+'</tr>'+
'<tr>'+value.CAT_ID+'</tr>'+
'<tr>'+value.SPOC_APPUSRID+'</tr>'+
'<tr>'+value.SUPPORT_TEAM+'</tr>'+
'<tr>'+value.REQUESTED_BY_APPUSRID+'</tr>'+
'<tr>'+value.DELIVERY_MANAGER_APPUSRID+'</tr>'+
'<tr>'+value.CREATEDBY_APPUSRID+'</tr>'+
'<tr>'+value.CREATEDDATE+'</tr>'+
'<tr>'+value.MODIFIEDBY_APPUSRID+'</tr>'+
'<tr>'+value.MODIFIED_DATE+'</tr>'+
'<tr>'+value.APPIMAGEPATH+'</tr>'+
'<tr>'+value.PARENT_APP_ID+'</tr>'+
'<tr>'+value.value.SERVER_LOCATION+'</tr>'+
'<tr>'+value.USAGE_CATID+'</tr>'+
            '</td>'
    $('#table_id').append(html);
    })

等等。并且您可以根据需要进行数据格式化。

Answer 3

var table = $('#table_id');

for (i = 1; i < data.length; i++) {
    table.append('<tr>');
        table.find('tr:last-child').append(

        '<td>' + data[i]["APP_MST_ID"] + '</td>',
        '<td>' + data[i]["APPLICATIONNAME"] + '</td>'
        );
    }

<table class="GeneratedTable" align="center" id = "table_id">
    <tr>
        <th>APP_MST_ID</th>
        <th>APPLICATIONNAME</th>
    </tr>
</table>

Answer 4

这是很多可能的答案之一。你甚至可以使用Object.keys，与DOM函数连接......

＆＃13;

let response = {  
   "Table":[  
      {  
         "APP_MST_ID":321.0,
         "APPLICATIONNAME":"R-Locator for Enterprise",
         "PROJECTNO":"R4G-25-APD-006",
         "VSS_FOLDER_LOC":null,
         "CAT_ID":1.0,
         "SPOC_APPUSRID":79.0,
         "SUPPORT_TEAM":"0",
         "REQUESTED_BY_APPUSRID":51.0,
         "DELIVERY_MANAGER_APPUSRID":43.0,
         "CREATEDBY_APPUSRID":null,
         "CREATEDDATE":null,
         "MODIFIEDBY_APPUSRID":null,
         "MODIFIED_DATE":null,
         "APPIMAGEPATH":null,
         "PARENT_APP_ID":null,
         "SERVER_LOCATION":null,
         "USAGE_CATID":null
      }
   ]
}

for(let k in response.Table[0]){
  window.document.getElementById("dvTable").innerHTML+=`<div>${response.Table[0][k]}</div>`;
}

＆＃13;

<div id="dvTable">                       
</div>

＆＃13;

Answer 5

您可以将格式化数据转储到div，但由于难以复制$ .ajax调用，我已将这些部分注释掉。

它的工作原理如下：

＆＃13;

var r =
`{
  "Table": [{
    "APP_MST_ID": 321.0,
    "APPLICATIONNAME": "R-Locator for Enterprise",
    "PROJECTNO": "R4G-25-APD-006",
    "VSS_FOLDER_LOC": null,
    "CAT_ID": 1.0,
    "SPOC_APPUSRID": 79.0,
    "SUPPORT_TEAM": "0",
    "REQUESTED_BY_APPUSRID": 51.0,
    "DELIVERY_MANAGER_APPUSRID": 43.0,
    "CREATEDBY_APPUSRID": null,
    "CREATEDDATE": null,
    "MODIFIEDBY_APPUSRID": null,
    "MODIFIED_DATE": null,
    "APPIMAGEPATH": null,
    "PARENT_APP_ID": null,
    "SERVER_LOCATION": null,
    "USAGE_CATID": null
  }]
}`;

function SearchInfo() {
  //var textBoxValue = $('#addresSearch').val();

  //$.ajax({
  //  type: "POST",
  //  url: "http://localhost:11181/Search/GetFilterSearch",
  //  data: JSON.stringify({
  //    textBoxValue: textBoxValue
  //  }),
  //  contentType: "application/json; charset=utf-8",
  //  dataType: "json",
  //  success: function(r) {
      // display data in div here
      $("#dvTable").html("<pre>" + r + "</pre>")
  //  }
  //})
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="SearchInfo();">Search</button>

<div id="dvTable"></div>

＆＃13;

如果您正在寻找实际的表格，那么您就是这样做的：

＆＃13;

var r = {
  "Table": [{
    "APP_MST_ID": 321.0,
    "APPLICATIONNAME": "R-Locator for Enterprise",
    "PROJECTNO": "R4G-25-APD-006",
    "VSS_FOLDER_LOC": null,
    "CAT_ID": 1.0,
    "SPOC_APPUSRID": 79.0,
    "SUPPORT_TEAM": "0",
    "REQUESTED_BY_APPUSRID": 51.0,
    "DELIVERY_MANAGER_APPUSRID": 43.0,
    "CREATEDBY_APPUSRID": null,
    "CREATEDDATE": null,
    "MODIFIEDBY_APPUSRID": null,
    "MODIFIED_DATE": null,
    "APPIMAGEPATH": null,
    "PARENT_APP_ID": null,
    "SERVER_LOCATION": null,
    "USAGE_CATID": null
  }]
};

function SearchInfo() {
  //var textBoxValue = $('#addresSearch').val();

  //$.ajax({
  //  type: "POST",
  //  url: "http://localhost:11181/Search/GetFilterSearch",
  //  data: JSON.stringify({
  //    textBoxValue: textBoxValue
  //  }),
  //  contentType: "application/json; charset=utf-8",
  //  dataType: "json",
  //  success: function(r) {
      // display data in div here
      $("#dvTable").html(CreateTable(r).html())
  //  }
  //})
}

function CreateTable(data) {
  var data = data.Table;

  var table = $("<table><tr /></table>");

  $.each(data[0], function(key, value) {
    table.find("tr").append("<th>" + key + "</th>");
  });

  $.each(data, function() {
    var trHtml = $("<tr />");
    $.each(this, function(key, value) {
      trHtml.append("<td>" + value + "</td>");
    });
    table.append(trHtml);
  });

  return table;
}

＆＃13;

th,
td {
  border: solid 1px black;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="SearchInfo();">Search</button>

<div id="dvTable"></div>

＆＃13;

Answer 6

这可能是一种可能的解决方案。

＆＃13;

var json = '{"Table": [{"APP_MST_ID": 321.0,"APPLICATIONNAME": "R-Locator for Enterprise","PROJECTNO": "R4G-25-APD-006","VSS_FOLDER_LOC":null,"CAT_ID":1.0,"SPOC_APPUSRID":79.0,"SUPPORT_TEAM":"0","REQUESTED_BY_APPUSRID":51.0,"DELIVERY_MANAGER_APPUSRID":43.0,"CREATEDBY_APPUSRID": null,"CREATEDDATE": null,"MODIFIEDBY_APPUSRID": null,"MODIFIED_DATE": null,"APPIMAGEPATH": null,"PARENT_APP_ID": null,"SERVER_LOCATION": null,"USAGE_CATID": null}]}';
var objects = JSON.parse(json); // Parse the json
objects = objects.Table;        // Get the content of Table

var string = "";                // create a string
jQuery.each(objects[0], function(id, value) { // get all the id's and values
   string = string + value + " "; // Do something here with the values or id's
});

// create something where you add it, or do it inside the each()-function
var div = document.createElement('div'); 
div.innerHTML = string;
document.body.appendChild(div);
// ^ just to show the values in this example

＆＃13;

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

＆＃13;

在jquery中以json显示Div中的数据

6 个答案: