从 db 获取数据到 js 数组
Posted
技术标签:
【中文标题】从 db 获取数据到 js 数组【英文标题】：Fetch data from db to js array 【发布时间】：2019-09-24 00:13:42 【问题描述】：所以我正在创建一个包含日历的页面，并且我想将我在不同页面上插入到数据库中的事件显示出来
如何在日历上显示事件？
这是模板自带的js代码（我的js技能不多）
我认为它显示事件的部分是在“事件：[...] 但我不知道如何从数据库中获取数据
var initCalendar = function()
var $calendar = $('#calendar');
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$calendar.fullCalendar(
header:
left: 'title',
right: 'prev,today,next,basicDay,basicWeek,month'
,
timeFormat: 'h:mm',
titleFormat:
month: 'MMMM YYYY', // September 2009
week: "MMM d YYYY", // Sep 13 2009
day: 'dddd, MMM d, YYYY' // Tuesday, Sep 8, 2009
,
themeButtonIcons:
prev: 'fa fa-caret-left',
next: 'fa fa-caret-right',
,
events: [
title: 'All Day Event',
start: new Date(y, m, 1)
,
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
,
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
,
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
,
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
,
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: 'fc-event-danger'
,
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
,
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
]
);
我还没有创建数据库表，但我知道如何创建它。
【问题讨论】：
您应该通过 php-mysql 数据库连接并了解 CRUD 操作，稍后您必须检查如何将 javascript 与 PHP 和 html 集成 代码建议？？？ @MangeshSathe w3schools.com/php/php_mysql_intro.asp查看本教程 伙伴我知道 php + mysql 操作我只是不知道如何将数据获取到 javascript 数组 vars 如果您知道数据库操作，则从数据库中提取必要的数据。关键事件：看起来像一个 JSON，所以一旦你从数据库中准备好数据数组，只需使用 json_encode 来获得正确的格式。然后使用事件键只需将 json 编码数组集成到事件之类的事件中： 【参考方案1】：有很多方法可以实现这一目标。
-
最好和最简单的方法是将 AJAX 请求 发送到您的服务器端脚本。您的服务器端脚本查询数据库，处理您的数据并返回对您的 ajax 请求的响应。考虑在
Php 中使用echo json_encode($array_values) 执行此操作。从那里您可以在 ajax 请求中使用 javascript 处理响应。您可能需要像 var result = JSON.parse(data) in javascript 那样解析您的回复。
例如：
//Within Your HTML Script
axios(
method: 'POST', //you can set what request you want to be
url: 'getdb.php',
data: id: 1,
)
.then(function (response)
// Server side response
var result = JSON.parse(response.data);
console.log(result );
)
.catch(function (error)
console.log(error);
);
//getdb.php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
// Create connection
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error)
die("Connection failed: " . $conn->connect_error);
$array_values = array();
// output data of each row
while($row = $result->fetch_assoc())
$array_values[] = $row;
;
echo json_encode($array_values)
$conn->close();
?>
-
另一种方法是当您在
HTML 中使用Php 进行服务器端调用时。在这种情况下：
<script>
var result = JSON.parse(JSON.stringify("<?php echo json_encode($array_values)?>"));
</script>
-
最后，您也可以在
Php 中嵌入HTML。这将是：
<?php
echo "<script>var result = JSON.parse(JSON.stringify('json_encode($array_values)'))</script>"
?>
您的服务器端脚本的响应是这样的：
$array_values = array('header' =>
array('left' => 'title', 'right' => 'prev,today....'),
'timeFormat' => 'h:mm',
.....,
'events' => array(
array('title' => 'All Day', 'start' => 'Date...'),
array('title' => 'All Day', 'start' => 'Date...'),
array('title' => 'All Day', 'start' => 'Date...'),
)
)
echo json_encode($array_values );
然后在您的 javascript 中，您可以执行以下操作：
var result = JSON.parse(response.data);
$calendar.fullCalendar(result);
或
//independently change each property without affecting others
var result = JSON.parse(response.data);
$calendar.fullCalendar().header= result.header;
$calendar.fullCalendar().timeFormat= result.timeFormat;
$calendar.fullCalendar().events= result.events;
//$calendar.fullCalendar() function is simply accepting an object as a parameter
之所以可以这样做是因为 SERVER SIDE RESPONSE 之后的 javascript 变量结果现在看起来像这样：
result =
header:
left: 'title',
right: 'prev,today,next,basicDay,basicWeek,month'
,
timeFormat: 'h:mm',
events: [
title: 'All Day Event',
start: new Date(y, m, 1)
,
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
,
这显然取决于您如何构建您对 Php 的响应；
【讨论】：
那么，如果我选择第一个选项，如何将这些数据调用到我发布的代码中？ 已更新。如果有帮助别忘了打勾 你有不和谐或推特吗？所以我可以更好地和你说话，我有点困惑.. 在哪个区域？而且我不在推特上。只是IG。阅读一些关于 javascript 对象的内容。这个$calendar.fullCalendar() 只是接受一个对象作为它的参数
让我看看我是不是对的。我创建了一个名为 ajax.php 的文件（示例），然后我输入了第一个示例中的代码，然后我输入了最后一个代码（javascript 响应) 在 calendar.js 中（我在上面创建的帖子中的代码在哪里）？我只是没有看到任何链接两个文件的参考【参考方案2】：
使用 jquery ajax 函数获取数据。
events: function(start, end, timezone, callback)
jQuery.ajax(
url: 'abc.php',
type: 'POST',
dataType: 'json',
data:
start: start.format(),
end: end.format()
,
success: function(responce)
var events = responce.bookingData;
callback(events);
);
【讨论】：
他想将db数据集成到js事件中。只有事件键需要来自数据库的数据。在这种情况下不需要 Ajax 调用。以上是关于从 db 获取数据到 js 数组的主要内容，如果未能解决你的问题，请参考以下文章