从PHP类访问HTML div id
从PHP类访问HTML div id
提问于 2018-07-26 00:56:51
我正在尝试学习PHP/Ajax，但是我被卡住了。我正在尝试将AJAX请求的结果呈现在PHP类外部声明的div元素中。
我有一个包含一个名为dashboard的类的PHP文件，一旦收到来自ajax查询的post变量，它就会处理对数据库的查询，如下所示
public function loadTeamMembersChart($teamID, $lecturer_id, $teamColour){
$db = $this -> db;
if (!empty ($teamID) && !empty ($lecturer_id)){
$result = $db -> loadTeamMembersChart($teamID, $lecturer_id);
if ($result) {
$response["teamMember"] = $result;
$teamMembers = $_SESSION["teamMember"] = $result;
//Pass the results to the below function
loadTeamMembers($teamMembers, $teamColour);
} else {
$response["result"] = "failure";
$response["message"] = "Unable to Find Team Member Data";
return json_encode($response);
}
} else {
return $this -> getMsgParamNotEmpty();
}
}然后在同一个php文件中，我有一个全局函数，将结果传递给它，名为loadTeamMembers，如下所示。
function loadTeamMembers($teamMembers, $teamColour){
//start to break up the teamMember object and store in variables
$teamMemberName = $_SESSION['teamMember']['all_team_member_names'];
$teamMemberPoints = $_SESSION['teamMember']['all_team_member_points'];
$teamMemberStudentNumber = $_SESSION['teamMember']['all_team_member_studentNumbers'];
$teamMemberLastActive = $_SESSION['teamMember']['all_date_last_present'];
$teamMemberTeamID = $_SESSION['teamMember']['all_team_ids'];
// The `$teamMemberData` array holds the chart attributes and data for the team object
$teamMemberData = array(
"chart" => array(
"caption" => "Student Team-Member Progress Chart",
"xAxisname"=> "Team-Member Name",
"yAxisName"=> "Points",
//Configure no.of visible plots
"numVisiblePlot"=> "5",
"theme"=> "zune",
"exportenabled"=> "1",
"exportMode"=> "server"
),
"categories" => array(
"category" => array()),
"dataset" => array(
"data" => array())
);
$teamMemberCount = 0;
// Push the data into the array
if (is_array($teamMemberName) || is_object($teamMemberName))
{
foreach($teamMemberName as $key => $value){
array_push($teamMemberData["categories"]["category"], array(
"label" => $teamMemberName[$teamMemberCount]." ".$teamMemberStudentNumber[$teamMemberCount]." Profile was last active on ".$teamMemberLastActive[$teamMemberCount]));
array_push($teamMemberData["dataset"]["data"], array(
"value" => $teamMemberPoints[$teamMemberCount],
"color"=> $teamColour));
$teamMemberCount++;
}
}
//encode the built team-member array so that it is returned to the ajax success request
echo $jsonEncodedTeamMemberData = json_encode($teamMemberData);}
然后在同一个文件中，但在两个PHP类之外，我的HTML中有以下脚本：
<script>
function getTeamMembers(teamID,lecturer_id, teamColourCode){
//Variables needed to query the external DB to return required data to populate the charts
var teamInfo = {
"teamID" : teamID,
"lecturer_id" : lecturer_id,
"teamColourCode" : teamColourCode
};
/*
The below is used for the 'was a student present for the most recent quiz' pie chart. A boolean is set so that the post request knows
that we only need to call the loadIfTeamMemberWasPresent(); function, as the data was already obtained in the first ajax request. However, we don't want
to use that data on the first ajax call.
*/
var teamDetails = {
"teamClicked" : true
};
//Below is the first ajax call
$.ajax({
data: teamInfo,
url: 'dashboard.php',
type: 'POST',
success : function(data) {
console.log(data)
chartData = data;
apiChart = new FusionCharts({
type: 'scrollColumn2d',
renderAt: 'team-member-chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: data
});
apiChart.render();
},
//Once the first ajax call has completed, we can then call the second ajax request to populate the pie-chart graph
complete:function(){
$.ajax({
data: teamDetails,
url: 'dashboard.php',
type: 'POST',
success : function(data) {
console.log(data)
chartData = data;
apiChart = new FusionCharts({
type: 'pie2D',
renderAt: 'teamMember-present-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: data
});
apiChart.render();
},
});
}
});
}
</script>但是，在我编写$columnChartTeamMember =...的地方，我无法访问和呈现名为team-member-chart-container的div id中的图表。
如果可能，我尽量不在类中包含超文本标记语言，因为其他类中的其他图表也需要呈现在其他div id中，比如individual-student-container。
我曾尝试阅读PHP Simple HTML DOM Parser Manual中找到的here，但作为一个初学者，它让我有点困惑。我也不确定这是否是我想要的。
我的方法基于fusioncharts提供的官方文档，可以在here上找到。
如果有人能就如何在上面提到的div-id中呈现我的图表提供一些指导，我将不胜感激。
编辑
最后，通过将从PHP脚本检索到的数据回显到AJAX请求，然后通过ajax请求的success调用构建我的图表，我设法解决了这个问题。我已经更新了我的代码，以显示这是如何实现的。我省略了对第二个ajax请求的处理，因为数据在第一次调用时就已经检索到了。然而，我还不想找回它，所以当第一个请求完成后，我提出了第二个请求。现在一切都运行得很完美。
回答 1
Stack Overflow用户
发布于 2018-07-26 01:46:52
这方面的一些东西应该对你有效。
PHP文件： class.teamMember.php
<?php
require_once "fusioncharts.php";
class TeamMember {
public __construct($data) {
self::loadTeamMembers($data)
}
public function loadTeamMembers($data) {
$columnChartTeamMember = new \FusionCharts("scrollColumn2d", "teamMemberChart", 500, 300, "team-member-chart-container", "json", json_encode($data));
$columnChartTeamMember->render();
}
}
new TeamMember($data);仍然需要从某个地方为它提供$data。看起来你是通过jQuery.post来做这件事的，但是因为你没有运行function：getTeamMembers，所以teamInfo总是空的，所以我省略了这部分。
HTML文件： chart.html
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id='unique-id'>Charts will load here.</div>
<script>
jQuery
.get('dashboard.php')
.then(function (data) {
jQuery('#unique-id').html(data);
});
</script>
</body>
</html>假设以下代码是$data (从FusionCharts复制/粘贴)：
$data = "{
"chart":{
"caption":"Harry\'s SuperMart",
"subCaption":"Top 5 stores in last month by revenue",
"numberPrefix":"$",
"theme":"ocean"
},
"data":[
{
"label":"Bakersfield Central",
"value":"880000"
},
{
"label":"Garden Groove harbour",
"value":"730000"
},
{
"label":"Los Angeles Topanga",
"value":"590000"
},
{
"label":"Compton-Rancho Dom",
"value":"520000"
},
{
"label":"Daly City Serramonte",
"value":"330000"
}
]
}";您不需要在类中对其执行json_encode操作。(换句话说，可以删除)但现在：
$data = json_decode($data, true);
new TeamMember($data);它应该显示在#unique-id <div>中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51524154
复制相关文章
相似问题