如何更好地從html數據庫中的數據庫檢索數據，只使用Ajax檢索數據庫中的數據？

Question

我打算建立一個主要與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> 

Answer 1

如果您正在使用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>