从选择下拉列表中选择Ajax请求 - Ajax request from a select drop down

我正试图使用jQuery和AJAX从数据库中获取事件数据
我的数据库表:

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`)

我的代码（在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_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) {
            echo "<option value='" .$event->event_title. "'>" .$event->event_title."</option>";
        }?>
    </select>
    <!-- I NEED HELP WITH THIS PART -->
    <script>
        $(document).ready(function() {
            $('#select-event-type').change(function() {
                $.ajax({
                    type:'post',
                    url:'',
                    data:'',
                        success: function(data) 
                        {
                            $('#event-details').html(data);
                        }
                });
            });
        });
    </script>   
    <!-- Start event-details -> here the data is supposed to be displayed -->
    <div id="event-details"></div> <!-- /#event-details -->
  </div><!-- /.event-selection -->

我的问题：我不确定我的情况下是什么URL和数据，也不确定是否必须使用JSON。我没有收到任何错误消息。每次我在下拉列表中更改选择时，它都会将整个页面加载到#event-detailsdiv中，而不是所需的数据库数据

我真的是个新手，而且我以前从未使用过AJAX。非常感谢你的帮助。

更新：
在控制台中，所有事件的数据现在都以json格式显示（非常感谢！）。但是仍然没有任何输出，当我更改选择中的事件时，控制台中的数据不会更新

在呈现模板时，您已经将所有事件的详细信息传递给模板，因此AJAX调用将是多余的，并且浪费了一个请求。试试这样的东西：

控制器

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) {
                        // Now we can get the event details from the selected value.
                        var event = events[this.value];
                        $('#event-details').html(event.title);
                    }
                });
            });
        })($);
    </script>   
    <!-- Start event-details -->
    <div id="event-details"></div> <!-- /#event-details -->
  </div><!-- /.event-selection -->

我还没有测试过它，所以我不确定它是否能正常工作，但基本想法是将PHP数组作为JSON传递到页面，这样您的JavaScript就可以使用相同的数据。

作为URL，您可以尝试以下操作：

"/controller/action"，例如"events/index"（normel页面请求的URL）

现在，您应该在成功函数的数据中从视图中获得孔HTML，并可以将其加载到您的div中。

如果您想指定应该加载哪些事件，您可以发布一些日期，并在控制器函数中对此进行评估。

它可能看起来像这样（不需要$.post的第二个参数）：

$.post('/events/index', {data: {event_id : id}}).done(function(data){
   $('#event-details').html(data);
});

数据以阵列的形式发送到控制器，看起来像：

array(
   data => array(
     event_id => id
  )
)

我希望这将帮助你