有史以来第一篇文章:
我正在使用HTML,PHP和Javascript构建我的第一个Web应用程序。
我使用Ajax运行PHP脚本来查询数据库。我想基本上在HTML表格中显示数据库的值。目前,从AJAX返回的整行显示在HTML中的单个行中。
PHP:
$scope.asesor = $stateParams.asesor;
的Javascript / HTML:
header("Content-type: application/json");
//Include database connect script
include 'connect.php';
$query = "SELECT * FROM Table";
$results = mysql_query($query) or die ('Could not query database');
if(mysql_num_rows($results)){
echo '{"testData":[';
$first = true;
$row=mysql_fetch_assoc($results);
while($row=mysql_fetch_row($results)){
//Cast Results to JSON Data type
if($first){
$first = false;
}
else{
echo ',';
}
echo json_encode($row);
}
echo ']}';
}
else {
echo '[]';
}
HTML:
/* AJAX Call to Get Values from PHP that Quiers Database */
$(document).ready(function(){
$.ajax({
async: true,
dataType: 'json',
url: 'php/get_wgw_errors.php',
error: function(jqXHR, textStatus, errorThrown)
{
alert('An error occurred... Look at the console');
},
success: function(data,status)
{
createTableByJqueryEach(data);
color_table();
}
});
});
/* Build App Data Table */
function createTableByJqueryEach(data)
{
var eTable="<section class='mdl-grid' id='my-error-table'><div
class='mdl-layout-spacer'></div><div class='mdl-cell mdl-cell--6-col-
tablet
mdl-cell--10-col-desktop mdl-cell--stretch'><span class='mdl-layout-
title'>
{{App}} Test Table Dynamic </span><table class='mdl-data-table mdl-js-
data-
table mdl-shadow--2dp mdl-data-table--selectable'><div class='mdl-layout-
spacer'><thead>"
$.each(data,function(index, row){
// eTable += "<tr>";
// eTable += "<td>"+value['name']+"</td>";
// eTable += "</tr>";
eTable += "<tr>";
$.each(row,function(key,value){
eTable += "<th>"+value+"</th>";
});
eTable += "</tr>";
});
eTable +="</tbody></table><div class='mdl-layout-spacer'></div>
</section>";
$('#eachTable').html(eTable);
}