【发布时间】:2019-01-02 13:59:53
【问题描述】:
我正在尝试学习 PHP/Ajax,但我遇到了困难。我试图让我的 AJAX 请求的结果呈现在我的 PHP 类之外声明的 div 元素中。
我有一个 PHP 文件,其中包含一个名为 dashboard 的类,它在收到来自 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 中访问和呈现我的图表。
如果可能的话,我试图在类本身中不包含 HTML,因为其他类中的其他图表也需要在其他 div id 中呈现,例如 individual-student-container。
我尝试阅读找到here 的PHP Simple HTML DOM Parser Manual,但作为初学者,这让我有些困惑。我也不确定这是否是我所追求的。
我的方法基于 fusioncharts 提供的官方文档,可以在 here 找到。
如果有人可以就我如何在提到的 div-id 中呈现图表提供一些指导,我将不胜感激。
编辑
最后,我设法通过将从我的 PHP 脚本中检索到的数据回显到 AJAX 请求,然后从 ajax 请求的 success 调用构建我的图表来解决我的问题。我已经更新了我的代码以显示这是如何实现的。我省略了对第二个 ajax 请求的处理,因为在第一次调用时已经检索到数据。但是,我还不想检索它,所以我在第一个请求完成后提出了第二个请求。现在一切正常。
【问题讨论】:
-
你不能直接从 PHP 向
<div>注入信息,你需要通过 JS 注入。 -
我相信是在
FusionCharts构造函数中处理的? -
Anuga 是对的,您可能希望在 ajax 调用的成功部分将任何数据注入到 div 中。
-
啊,好的,我去看看,谢谢你的建议。
标签: php html fusioncharts