【发布时间】：2021-03-06 13:54:36
【问题描述】：
所以我一直在为我的作品集开发一个功能，其中关于我的页面基本上是一个带有标签的“文档”，当你点击一个标签时，该标签附带的内容就会出现。我遇到的问题是我不知道如何从我的 php 文件中获取数据到我的 html 中。所以基本上我得到了标签工作，我得到了 ajax 工作它到达 php 并且 php 从数据库中获取数据，但是我不知道如何显示这些数据。生病分享我的代码：
HTML：
<?php
include 'includes/header.inc.php';
?>
<main>
<section class="banner">
<div class="wrapper">
<article class="about-me">
<div class="about-box">
<div class="about-tabs">
<nav>
<ul>
<li class="tab-about tab 1"><a href="#">About me</a></li>
<li class="tab-work tab 2"><a href="#">Work experience</a></li>
<li class="tab-school tab 3"><a href="#">Education</a></li>
<li class="tab-other tab 4"><a href="#">Other cetrificates</a></li>
</ul>
</nav>
</div>
<div class="about-content">
<div class="content-welcome">
<h4>Title</h4>
<p>Have a look around by clicking on the tabs! </p>
</div>
<div class="content-about"></div>
<div class="content-work"></div>
<divc class="content-school"></div>
<div class="content-other"></div>
</div>
</div>
</article>
</div>
<?php include 'includes/sidebarnav.inc.php'; ?>
<script src="js/abouttabs.js"> </script>
</main>
<?php include 'includes/footer.inc.php'; ?>
Javascript：
$(document).ready(function(){
let activeTab ='';
let tabNum = '';
$(".tab-about").click(function() {
if (activeTab == '') {
$(".tab-about").addClass('active');
activeTab = "about";
return activeTab;
} else {
$(".active").removeClass('active');
$(".tab-about").addClass('active');
activeTab = "about";
return activeTab;
}
});
$(".tab-work").click(function() {
if (activeTab == '') {
$(".tab-work").addClass('active');
activeTab = "work";
return activeTab;
} else {
$(".active").removeClass('active');
$(".tab-work").addClass('active');
activeTab = "work";
return activeTab;
}
});
$(".tab-school").click(function() {
if (activeTab == '') {
$(".tab-school").addClass('active');
activeTab = "school";
return activeTab;
} else {
$(".active").removeClass('active');
$(".tab-school").addClass('active');
activeTab = "school";
return activeTab;
}
});
$(".tab-other").click(function() {
if (activeTab == '') {
$(".tab-other").addClass('active');
activeTab = "other";
return activeTab;
} else {
$(".active").removeClass('active');
$(".tab-other").addClass('active');
activeTab = "other";
return activeTab;
}
});
$('.about-tabs li').click(function(){
switch (activeTab) {
case 'about':
tabNum = 1;
break;
case 'work':
console.log('work');
tabNum = 2;
break;
case 'school':
console.log('school');
tabNum = 3;
break;
case 'other':
console.log('other');
tabNum = 4;
break;
default:
console.log('oopsie');
break;
}
});
$('.tab').click(function(){
let tab = tabNum;
console.log(tab);
jQuery.ajax({
url: "testdit.php",
type : "POST",
data:{tab:tab},
success:function(data){
console.log(data);
},
error: function(error)
{
alert("couldnt be sent" + error);
}
});
});
});
php：
这是我的数据库查询类：
<?php
require_once 'dbh.class.php';
class QueryDatabase extends Database {
public function getData($tablename, $selector, $value) {
if (!isset($selector)){
echo 'Something went wrong!';
} else if ($selector == ''){
$stmt = $this->connect()->query("SELECT * FROM $tablename");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
return $row;
}
}else {
$stmt = $this->connect()->query("SELECT * FROM $tablename where $selector = $value");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
return $row;
}
}
}
public function setData($tablename, $colums, $data) {
if (!isset($tablename) or !isset($data)) {
echo 'Something went wrong!';
} else {
$sql = "INSERT INTO $tablename";
$sql .= $colums;
$sql .= $data;
$q = $this->connect()->prepare($sql);
$q->execute();
}
}
protected function changeData() {
}
protected function delData() {
}
}
这是我的关于页面类：
<?php
class About {
public $activeTab = '';
public $pageData = '';
public function setTab($tab) {
$this->activeTab = $tab;
}
public function getPage() {
// vraag de content van de tab uit de database
$getPageContent = new QueryDatabase();
$this->pageData = $getPageContent->getData('about_page_content','tab',$this->activeTab);
}
}
这是我实际处理 ajax 请求的 php 文件：
<?php
include 'classes\dbh.class.php';
include 'classes\querydatabase.class.php';
include 'classes\about.class.php';
$tab = $_POST['tab'];
$try = new About();
$try->setTab($tab);
$try->getPage();
extract($try->pageData, EXTR_PREFIX_SAME, "wddx");
echo $title;
exit;
所以我从提取中获取数据，例如当我回显 $title 时，我得到了正确的数据，但我不知道如何在我的 about 页面 html 中使用它
我希望我解释得正确，我不太清楚该怎么说。
【问题讨论】：
标签： javascript php jquery ajax oop