通过AJAX加载不同的php对象

Question

I work in CodeIgniter and I have a view created by my controller that sends me a bunch of different vacancies. The dynamic code in my view looks like this:

<div class="row vacancy-grid">
    <?php
    foreach ($vacancies as $vacancy) {
    ?>
        <div class="col-lg-3 vacancy-item">
            <div class="vacancy-header">
                <img src="<?php
                    if (isset($vacancy[0]->banner)) {
                        echo base_url() . VACANCY_IMAGES . $vacancy[0]->banner;
                    }else {
                        echo base_url() . IMAGES_BASE . "noimage.png";
                    }
                ?>" alt="Logo Lochtfest" />
            </div>
            <div class="vacancy-info">
                <h2><?php echo $vacancy[0]->name; ?></h2>
                <?php
                if (!empty($vacancy[1])) {
                ?>
                    <ul class="list-interests">
                        <?php
                        foreach ($vacancy[1] as $interest) {
                        ?>
                            <li><?php echo $interest; ?></li>
                        <?php
                        }
                        ?>
                    </ul>
                <?php
                }
                if (!empty($vacancy[2])) {
                    ?>
                    <ul class="list-skills">
                        <?php
                        foreach ($vacancy[2] as $skill) {
                            ?>
                            <li><i class="fa fa-check"></i><?php echo $skill; ?></li>
                            <?php
                        }
                        ?>
                    </ul>
                    <?php
                }
                ?>
                <ul class="list-logistics">
                    <li>
                        <i class="fa fa-map-marker"></i>
                        <?php echo $vacancy[0]->address_line_1; ?> <br />
                        <?php echo $vacancy[0]->address_postal_code . ", " . $vacancy[0]->address_city; ?>
                    </li>
                    <li class="bold-sm"><i class="fa fa-calendar"></i> <?php echo $vacancy[3]; ?></li>
                </ul>
                <ul class="list-type">
                    <?php
                    if ($vacancy[0]->occupancy_kind == 1) {
                    ?>
                        <li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li>
                    <?php
                    } else if ($vacancy[0]->occupancy_kind == 2) {
                    ?>
                        <li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li>
                    <?php
                    } else {
                    ?>
                        <li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li>
                        <li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li>
                    <?php
                    }
                    ?>
                </ul>
            </div>
        </div>
    <?php
    }
    ?>
</div>

First the $vacancies will contain all vacancies because no filters have been selected yet. So I have a couple of filters that I want the user to be able to use. My problem is that how do I load all this content back on the same place without needing a page refresh? I could do it with a page refresh but I would like it to be without one. My JS code looks like this:

//This is for the filters in the vacancy overview page
filteredVacancies = $('#filterbtn'),
    ajaxOptions4 = {
        type: 'POST',
        url: "http://localhost/codeigniter/codeigniter/dashboard/vacancy/vacancyFiltering",
        dataType: 'json'
    };

filteredVacancies.click(function (ev) {
    var options4 = $.extend({}, ajaxOptions4, {
        data: {
            "datefrom": $('#date-from').datepicker('getDate'),
            "dateto": $('#date-to').datepicker('getDate')
        }
    });
    ev.preventDefault();

    // ajax done & fail
    $.ajax(options4).done(function (data) {
        if (data.result === 'success') {
            //TODO: how to do this???
        }
    }).fail(function (xhr, status, error) {
        console.warn(xhr);
        console.warn(status);
        console.warn(error);
    });
});

Answer 1

Here's what you can do.

1. Create templates out of your DOM elements using handlebars. The code within foreach.
2. Now, within your success block, you can parse these elements based on the JSON data you receive from the AJAX call.