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

我计划建立一个主要与Ajax一起使用的网站，但我担心我的PHP代码结构的速度。

第一种技术

我已经初始化了所有从数据库中查询的数据值，并与HTMl，CSS选择器组合为方法中的变量，然后将其回显到客户端浏览器，如下所示。

这两种技术我都使用Ajax来响应所有数据，但是对于这种方法，我将Ajax dataType用作HTML，因为我的PHP与客户端脚本一起回显。

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

第二种技术

另一方面，如果我在获取所有数据后使用javascript和Ajax方法仅查询数据库中的数据有什么不同，我将使用Javascript，CSS，HTM来构成或制作客户端视图的布局。

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

最佳答案

如果您使用的是AJAX，我们应该记住的一件事就是保持所有内容都是轻量级的。

这就是说，应该省略所有不是真正必需的数据或可以在客户端上处理的数据，并在客户端上进行处理。

在您的ajax响应中包括任何html代码不是一个好习惯，它只会使您的响应非常膨胀。因此，最好只输出原始数据，这些原始数据可以是JSON格式并在使用Javascript之后进行处理。

就您而言，您提到的第二种技术比第一种更为可取。

例：

JSON响应（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>

关于javascript - 在使用Ajax仅检索数据库中的数据之间，如何更好地从html结构中的数据库中检索数据的技术？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34804226/