Php 来自select下拉列表的Ajax请求

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

我在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;
}

视图：

我的问题是：我不确定我的例子中的URL和数据是什么，我也不确定是否必须使用JSON。我没有收到任何错误消息。每次我在下拉列表中更改选择时，它都会将整个页面加载到event details div中，而不是所需的数据库数据。 我对这一点非常陌生，以前从未使用过AJAX。非常感谢你的帮助

更新：

---

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

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

控制器

模型

看法

---

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

作为URL，您可以尝试以下方法：

/控制器/操作，例如事件/索引您将通过正常页面请求请求的URL

现在，您应该在success函数中的数据中从视图中获取hole HTML，并可以将其加载到div中

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

可能是这样的，$.post的第二个参数不需要：

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

数据以数组形式发送到控制器，如下所示：

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

---

我希望这将对您有所帮助

您是否使用浏览器的调试工具来观察代码的故障位置？通常通过F12召唤。说得对！每次我在下拉列表中更改我的选择时，它都会将整个页面加载到event details div中。您正在通过post请求访问当前页面。我猜您实际上没有设置api端点，因此它只是返回当前页面的视图。您需要设置一个路由，该路由需要请求get、post等并返回所需的数据。我如何设置api端点？@kringeltorte:我想我弄乱了PHP的三元运算符语法。您可以将其分解为多行—如果数组的长度大于0，我只想回显事件数组。我会尝试修正它并编辑我的答案。@Kringelotte:没问题。可惜我不在家——我可以测试代码，而不是在这里编写代码，并希望它能工作！：我忘了添加：在getEventTypes函数中，您需要为每个事件添加一个event_id属性$事件[$event->event\u id]->event\u id=$event->event\u id；这似乎是一个无害的Chrome错误-请看这里：啊，我把PHP/JS语法弄混了-。查看jQuery更改的文档-在获取元素的选定值时，我的代码中有一个错误，这可能是由于数组序列化的方式造成的。感谢您的帮助！当我更改选择时，我现在什么也得不到。我不确定你答案中的{data:{event_id:id}}部分是什么意思？我是否必须将我想要显示的数据放在这里？例如：{data:{event\u title:title}}？别忘了在我的ajax调用中包装ypur change事件。数据对象用于通过ajax调用发送给控制器的数据，例如，要显示的事件的ID。显示的数据要么在视图中定义，要么在ajax调用的成功函数中返回json对象。我仍然没有得到任何输出。当我更改选择时，页面上不会发生任何事情。非常感谢你的努力。这对我帮助很大！我得到这个错误：uncaughtreferenceerror:id没有定义，所以这里的title必须是javascript中的一个变量。如果不想通过ajax向控制器发送任何数据，只需将第二个参数保留为空$.post'/your/url'。完成。

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

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

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