在使用Ajax检索数据库中的数据之间，在html结构中从数据库检索数据的技术如何更好？

Question

I've planning to build an website which mostly work with Ajax but I concern about the speed of my PHP code structure.

First technique

I've initial all data values which I query from DB and combine with HTMl, CSS selector to a variable in my method and then echo it out to the client browser as below function.

Both of this techniques I've using Ajax to respond all data but for this method I will using Ajax dataType as HTML because my PHP echo with client side script.

public function last_update() {

    $this->select_cat = $this->select_cats('tmv');
    $out = '';
    $out .= '<div class="soc"><div class="sr"><div class="s"><span class="">Newest and Last update</span></div></div></div><div id = "cat_menu2" class = "owl-carousel owl-theme">';
    foreach ($this->select_cat as $k => $cat_val) {
        if ($cat_val) {
            $out .= '<div style = "border-right:1px solid rgba(69, 69, 69, 0.48);"><div class = "row mi"><a>Hello man dfds dfgdfg </a></div></div>';
        } else {
            $out .= '<div style = "border-right:1px solid rgba(69, 69, 69, 0.48);"><div class = "row mi"><a>Hello man dfds dfgdfg </a></div></div>';
        }
    }
    $out .= '</div>';
    return $out;
}

Second technique

Another hand, I though how it is difference if I using javascript with Ajax method to query only data from database after I got all data I will using Javascript, CSS, HTM, to make up or make the layout for client view.

    <script>
    $(window).ready(function () {

        var prodId = '', prodName = '', prodPrice = '', prodImg = '', prodSImg = '';
        var data_array = [];
        $.ajax({
            type: "GET",
            url: "<?php echo base_url('main/fuck'); ?>",
            dataType: "json",
            cache: false,
            success: function (data, st) {
                if (st == 'success') {
                    $.each(data.data, function (i, obj) {
                        obj = {
                            prodId: obj.prodId,
                            prodName: obj.prodName,
                            prodPrice: obj.prodPrice,
                            prodImg: obj.prodImg,
                            prodSImg: obj.prodSImg,
                        }
                        data_array.push(obj);
                    });
                }
                console.log(data_array); // I will using html,css to make up or create layout of my task here and then append to some elements 
            }
        });
    });
</script>

Answer 1

If you are working with AJAX, one thing that we should keep in mind is Keep everything lightweight.

Which means, any data that are not really necessary or can be processed on the client side should be omitted and do it on the client side.

It is not a good practice to include any html code in your ajax response it will just make your response very bloated. So instead, it is better to just output the raw data which could be in JSON format and processed after using Javascript.

In your part, the second technique you mentioned is more preferable than the first.

Example:

JSON Response(sample.php):

[{
    name: "Hello",
    age: 18
},
{
    name: "World",
    age: 21
}]

JavaScript(jQuery):

$.ajax({
    type: "GET",
    url:  "sample.php",
    dataType: "json",
    success: function (data) {

        for(var i = 0; i < data.length; i++) {

            var $con = $("<div>");

            // name
            var $name = $("<div>");
            $name.html(data[i].name);

            // age
            var $age = $("<div>");
            $age.html(data[i].age);

            $("#user").append($con);

            $con.append($name);
            $con.append($age);

        }

    }
})

HTML:

<div id="user">
</div>