CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
johnDoe
johnDoe

Reputation: 63

Return database results as json or html

I created a filter form and when I submit that form, it sends an ajax request to give_results_json.php, and then at back-end give_results_json.php does a query to the database and returns data in JSON format.

Method1

give_results_json.php

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

returned data

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

Then I handle this data with jQuery to display the data in HTML form

json data Handled at front end by 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)
        }});
       });

Is above method is correct, Or shall it is better to handle the data at the backend and return HTML result already, And then javascript only need to append that data to the page

so give_results_json.php will become give_results_html.php

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

returned data

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

can be easily handled at front-end by Jquery

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

Note: in actual, there is lot more data returned from the database, there are around 20 columns but I need to get data for 20 rows at once

Thanks!

Upvotes: 0

Views: 77

Answers (1)

Jan Myszkier
Jan Myszkier

Reputation: 2744

I'd say method 2 is wrong because it returns the VIEW layer (HTML markup). this should not be the case. you should separate DATA from VIEW. Method 2 doesn't do that. Method 1 is way better, although I'd also change the method to use jquery object creation instead of returning plain html. Right now it looks like the property_str was actually filling a template with data. this is working and readable, but not really considered "jquery way".

Upvotes: 1

Related Questions