个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我通过 ajax 传递从数据库中获取的数据以显示在 html 页面中。我设法从 php 脚本将它传递到一个多维数组中。现在我得到了 json 字符串，但我不确定如何在 html 表中正确显示输出。
脚本
$("#submit").on("click",function()
{
$("#set_setting").submit(function(){
data = $(this).serialize()
$.ajax({
type: "POST",
dataType: "html",
url: "submit_setting.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
alert(data);
//hide the form
$("#set_setting").slideUp("slow");
//show the result
/* for (i = 0; i < data.length; i++) {
console.log(data);
$(".the-return").html(data);
}*/
console.log(data);
$(".the-return").html(data);
}
});
return false;
});
});
PHP脚本
$json=array();
array_push($json,array("type"=>$carType,"maker"=>$carMaker));
echo json_encode($json);
数据输出
HondaHonda maker[{"type":["flying car","3 wheleer","weird car","miracle car","tata car","see car","star car","mn car","jkcar","car test","ting","Honda"],"maker":["test maker","diamond car","ruby car","dont know car","titi car","saw car","moon car","ty car","ty car","car maker test","ting maker","Honda maker"]}]
如何在 html 表格中显示这个 json 字符串？
最佳答案
这里有一些普通的 JS 可以解决问题。可能值得一提的是，您正在返回一个结果数组，其中只有一个元素。这就是我的代码中出现 parsedResult[0] 的原因。如果你想返回多个 html 表的数据，你将有 parsedResult[1]、parsedResult[2] 等。这段代码没有考虑到这种情况——我已经硬编码它以使用只是第一个。
结果:(请原谅 html 表格的文本格式)
type maker
flying car test maker
3 wheleer diamond car
weird car ruby car
miracle car dont know car
tata car titi car
see car saw car
star car moon car
mn car ty car
jkcar ty car
car test car maker test
ting ting maker
Honda Honda maker
代码:
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag);}
window.addEventListener('load', onDocLoaded, false);
var dummyResultString = '[{"type":["flying car","3 wheleer","weird car","miracle car","tata car","see car","star car","mn car","jkcar","car test","ting","Honda"],"maker":["test maker","diamond car","ruby car","dont know car","titi car","saw car","moon car","ty car","ty car","car maker test","ting maker","Honda maker"]}]';
function onDocLoaded()
{
var ajaxResult = dummyResultString;
var tblOfResults = parseAndCreateTable( ajaxResult );
document.body.appendChild(tblOfResults);
}
function parseAndCreateTable(inputString)
{
var rawResult = inputString;
var parsedResult = JSON.parse(rawResult);
var tableHeadings = [];
// extract the name of the properties that the object has.
for (var property in parsedResult[0])
{
if (parsedResult[0].hasOwnProperty(property))
tableHeadings.push(property);
}
// make the table
var tbl = newEl('table');
var tbody = newEl('tbody');
tbl.appendChild(tbody);
// make the first row, with headings in it
var tr = newEl('tr');
var i, n = tableHeadings.length;
for (i=0; i<n; i++)
{
var th = newEl('th');
th.innerText = tableHeadings[i];
tr.appendChild(th);
}
tbody.appendChild(tr);
// now for the 'fun' part - the body itself.
var curRowIndex, curColIndex, nRows = parsedResult[0][tableHeadings[0]].length, nCols = tableHeadings.length;
for (curRowIndex=0; curRowIndex<nRows; curRowIndex++)
{
var tr = newEl('tr');
for (curColIndex=0; curColIndex<nCols; curColIndex++)
{
var td = newEl('td');
td.innerText = parsedResult[0][ tableHeadings[curColIndex] ][curRowIndex];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
return tbl;
}
</script>
<style>
</style>
</head>
<body>
</body>
</html>
关于javascript - 如何在表格中显示json字符串的多维数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31531790/
25
4
0
如何使用 SPListCollection.Add(String, String, String, String, Int32, String, SPListTemplate.QuickLaunchO
我刚刚开始使用 C++ 并且对 C# 有一些经验，所以我有一些一般的编程经验。然而，似乎我马上就被击落了。我试过在谷歌上寻找，以免浪费任何人的时间，但没有结果。 int main(int argc,
这个问题已经有答案了: In Java 8 how do I transform a Map to another Map using a lambda? (8 个回答) Convert a Map>
我正在使用 node + typescript 和集成的 swagger 进行 API 调用。我 Swagger 提出以下要求 http://localhost:3033/employees/sear
我是 C++ 容器模板的新手。我收集了一些记录。每条记录都有一个唯一的名称，以及一个字段/值对列表。将按名称访问记录。字段/值对的顺序很重要。因此我设计如下: typedef string
我需要这两种方法，但j2me没有，我找到了一个replaceall();但这是 replaceall(string,string,string); 第二个方法是SringBuffer但在j2me中它没
If string is an alias of String in the .net framework为什么会发生这种情况，我应该如何解释它: type JustAString = string
我有两个列表(或字符串):一个大，另一个小。 我想检查较大的(A)是否包含小的(B)。 我的期望如下: 案例 1. B 是 A 的子集 A = [1,2,3] B = [1,2] contains(A
我有一个似乎无法解决的小问题。 这里...我有一个像这样创建的输入... var input = $(''); 如果我这样做......一切都很好 $(this).append(input); 如果我
我有以下代码片段 string[] lines = objects.Split(new string[] { "\r\n", "\n" }, StringSplitOptions.No
这可能真的很简单，但我已经坚持了一段时间了。 我正在尝试输出一个字符串，然后输出一个带有两位小数的 double ，后跟另一个字符串，这是我的代码。 System.out.printf("成本:%.2
以下是 Cloud Firestore 列表查询中的示例之一 citiesRef.where("state", ">=", "CA").where("state", "= 字符串，我们在Stack O
我正在尝试检查一个字符串是否包含在另一个字符串中。后面的代码非常简单。我怎样才能在 jquery 中做到这一点？ function deleteRow(locName, locID) { if
这个问题在这里已经有了答案: How to implement big int in C++ (14 个答案) 关闭 9 年前。 我有 2 个字符串，都只包含数字。这些数字大于 uint64_t 的
我有一个带有自定义转换器的 Dozer 映射: com.xyz.Customer com.xyz.CustomerDAO customerName
这个问题在这里已经有了答案: How do I compare strings in Java? (23 个回答) 关闭 6 年前。 我想了解字符串池的工作原理以及一个字符串等于另一个字符串的规则是
我已阅读 this问题和其他一些问题。但它们与我的问题有些无关 对于 UILabel 如果你不指定 ? 或 ! 你会得到这样的错误: @IBOutlet property has non-option
这两种方法中哪一种在理论上更快，为什么？ (指向字符串的指针必须是常量。) destination[count] 和 *destination++ 之间的确切区别是什么？ destination[co
This question already has answers here: Closed 11 years ago. Possible Duplicates: Is String.Format a
我有一个Stream一个文件的，现在我想将相同的单词组合成 Map这很重要，这个词在 Stream 中出现的频率. 我知道我必须使用 collect(Collectors.groupingBy(..)
我是一名优秀的程序员,十分优秀！