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

方法1

给出结果_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

给出结果的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 行的数据

谢谢！

解决方案

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