方法1

Question

我创建了一个过滤器form，当我提交该表单时，它向give_results_json.php发送ajax请求，然后在后端give_results_json.php对数据库进行查询并返回JSON格式的数据。

方法1

give_results_json.php

 $rows = $pdo->query($query);
 echo json_encode($rows);

返回的数据

[{"title":"Top Class home",,"cnt_rooms":3,"floor":1,"square_living":372},{"title":"Home of Dreams",,"cnt_rooms":4,"floor":2,"square_living":374}....]

然后我使用jQuery处理此数据以HTML格式显示数据

json数据由Jquery在前端处理

function property_str(value_obj){
return '<div class="property-container"><div><<div class="detail"><div class="fig-title clearfix"><h3>'+value_obj.title+'</h3></div><ul><<li>'+value_obj.cnt_rooms+' Rooms</li><li>'+value_obj.square_living+' Sq Ft</li></ul></div></div>';
 }
   $('#filter_form').on("submit",function(e){
    e.preventDefault();
    $.ajax({
        type: 'get',
        url: "give_results_json.php",
        data: $(this).serialize(),
        success: function(data){
                json_obj = $.parseJSON(data);
                var result_str =''
                $.each(json_obj, function(index,value){
                    result_str +=  property_str(value)
                });
                $("#filter_results").html(result_str)
        }});
       });

以上方法是正确的，还是最好在后端处理数据并已经返回HTML结果，然后javascript只需要将该数据追加到页面即可

因此give_results_json.php将成为give_results_html.php

方法2

give_results_html.php

$rows = $pdo->query($query);
foreach($rows as $row){
   $complete_html_str .=  '<div class="property-container"><div><<div class="detail"><div class="fig-title clearfix"><h3>'.$row['title'].'</h3></div><ul><<li>'.$row['cnt_rooms'].' Rooms</li><li>'+$row['square_living']+' Sq Ft</li></ul></div></div>';
  } 

echo $complete_html_str;

返回的数据

<div class="property-container"><div><<div class="detail"><div class="fig-title clearfix"><h3>Top Class home</h3></div><ul><<li>3 Rooms</li><li>'+374 Sq Ft</li></ul></div></div><div>...........

可以通过Jquery在前端轻松处理

 $.ajax({
        type: 'get',
        url: "give_results_json.php",
        data: $(this).serialize(),
        success: function(data){
                $("#filter_results").html(data)
        }});

注意：实际上，从数据库返回的数据很多，大约有20列，但我需要一次获取20行的数据

谢谢！

Answer 1

我会说方法2是错误的，因为它返回了VIEW层（HTML标记）。事实并非如此。您应该将DATA与VIEW分开。方法2不会那样做。方法1更好，尽管我也将方法更改为使用jquery对象创建而不是返回纯HTML。现在看来property_str实际上是用数据填充模板。这是可行且可读的，但并不是真正的“ jquery方式”。

以json或html形式返回数据库结果

方法1

方法2

1 个答案: