Question

我试图使用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 -->

我的问题：我不确定我的案例中包含哪些网址和数据，我不确定是否必须使用JSON。我没有收到任何错误消息。每次我在下拉列表中更改我的选择时，它会将整个页面加载到＃event-details div而不是所需的数据库数据。

我对此非常陌生，之前从未使用过AJAX。非常感谢您提供任何帮助。

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

Answer 1

在呈现模板时，您已经将有关所有事件的详细信息传递给模板，因此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;
}

查看

<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>  <div id="event-details"></div>  </div>

我还没有对其进行测试，所以我不确定它是否按原样运行，但基本的想法是将PHP数组作为JSON传递给页面，因此您的JavaScript可以使用相同的数据。

Answer 2

作为网址，您可以尝试以下内容：

“/ 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
  )
)

我希望这会对你有所帮助

来自select下拉列表的Ajax请求

2 个答案: