My数据库表:
TABLE `events` (
`event_id` INT(11) unsigned NOT NULL AUTO_INCREMENT,
`event_title` VARCHAR(255) NOT NULL,
`event_desc` TEXT,
`event_location` VARCHAR(255) NOT NULL,
`event_requirements` TEXT DEFAULT NULL,
`event_date` DATETIME NOT NULL,
PRIMARY KEY (`event_id`)
目标:当在选择下拉菜单中选择一个事件时,我想显示数据库数据的其余部分,它属于下面div中的事件
解决问题的尝试(在MVC体系结构中):
控制器
function index()
{
$overview_model = $this->loadModel('Events');
$this->view->events = $overview_model->getEventTypes();
$this->view->render('events/index');
}
型号
public function getEventTypes()
{
$sth = $this->db->prepare("SELECT * FROM events");
$sth->execute();
$events = array();
foreach ($sth->fetchAll() as $event) {
$events[$event->event_id] = new stdClass();
$events[$event->event_id]->event_id = $event->event_id;
$events[$event->event_id]->event_title = $event->event_title;
$events[$event->event_id]->event_desc = $event->event_desc;
$events[$event->event_id]->event_location = $event->event_location;
$events[$event->event_id]->event_requirements = $event->event_requirements;
$events[$event->event_id]->event_date = $event->event_date;
}
return $events;
}
查看
<!-- start event type selection -->
<div class="event-selection">
<label>Choose an event:</label>
<select id="select-event-type">
<?php foreach ($this->events as $event) {
// Using the event's ID as a value makes it easier for us to look up the selected event.
echo "<option value='" .$event->event_id. "'>" .$event->event_title."</option>";
}?>
</select>
<script>
(function ($) {
// Here we set the JavaScript variable 'events' to a JSON-encoded copy of the array we passed to the template, or null (if there are no events).
var events = <?php echo (count($this->events) > 0) ? "JSON.parse(" .json_encode($this->events). ");" : "null"; ?>
$(document).ready(function() {
$('#select-event-type').change(function() {
if (events) {
var event = events[this.value];
$('#event-details').html(event.title);
}
});
});
})($);
</script>
<!-- Start event-details -->
<div id="event-details"></div> <!-- /#event-details -->
</div><!-- /.event-selection -->
在页面上,当我更改下拉选择时,不会发生任何事情
控制台输出(铬):
<script>
(function ($) {
var events = JSON.parse({"1":{"event_id":"1","event_title":"event1","event_desc":"event1","event_location":"eventlocation","event_requirements":"event1","event_date":"2022-07-20 15:00:00"},"2":{"event_id":"2","event_title":"event2","event_desc":"event2","event_location":"eventlocation","event_requirements":"event2","event_date":"2015-04-20 15:00:00"},"3":{"event_id":"3","event_title":"event3","event_desc":"event3","event_location":"eventlocation","event_requirements":"event3","event_date":"2019-11-20 16:00:00"}}); $(document).ready(function() {
$('#select-event-type').change(function() {
if (events) {
// Now we can get the event details from the selected value.
var event = events[this.value];
$('#event-details').html(event.title);
}
});
});
})($);
</script>
错误:
未捕获的SyntaxError:意外的令牌
根据我的研究,产生错误的线路是这个(在视图中):
var events = <?php echo (count($this->events) > 0) ? "JSON.parse(" .json_encode($this->events). ");" : "null"; ?>
控制台中的JSON格式正确吗?另一个线程建议使用$.getJSON()而不是JSON.parse(),但是,由于这是我第一次使用JSON,我不太确定在我的情况下如何使用
我非常感谢任何形式的帮助!
var events = JSON.parse({"1":{"…
您正试图将JavaScript对象文本解析为JSON。
由于您必须有一个字符串才能解析JSON,因此它会被转换为一个字符串,从而提供相当于:
var events = JSON.parse("[object Object]");
这不是JSON。
直接使用对象文字即可:
var events = {"1":{"…