我通过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;
});
});
$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]等。这段代码没有考虑到这种情况——我已经对它进行了硬编码，使其只适用于第一种情况。
Result:(原谅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>
可能是这样的:
var typeMsg = ''
var makers = ''
if(data && data[0].type) { //considering data is your response object
for(var c in data[0].type) {
typeMsg += c + ', ';
}
}
if(data && data[0].maker) {
for(var c in data[0].maker) {
makers += c + ', ';
}
}
$('#elementForType').text(typeMsg && typeMsg.trim().replace(/,$/, "") + "." || 'No Type data available');
$('#elementForMakers').text(makers && makers.trim().replace(/,$/, "") + "." || 'No makers data available');