0

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!

Community
  • 1
  • 1
johnDoe
  • 63
  • 2
  • 8
  • 2
    _"Is above method is correct"_ - That's just a matter of preference and different people will tell you differently. In my opinion, returning json is much better, since you can reuse that code, regardless of the presentation. It's a separation of concerns, which, again just my opinion, is a good thing. However, I will vote to close this question since it will only get opinion-based answers. – M. Eriksson Aug 08 '18 at 12:02
  • @MagnusEriksson Thanks, I am already returning data as JSON, Just wanted to confirm as in the first method we disclose the column names in our database table, I thought that could be a security issue or something, I knew I was overthinking that, Thanks:) – johnDoe Aug 08 '18 at 12:06
  • Not hard to mask table field names if that is a concern – charlietfl Aug 08 '18 at 12:08
  • Well, even if you do return the column names: 1. No one knows that except from you. 2. Even if they do know that, if you have proper security messures in place (like prepared statement etc), you're most likely OK. – M. Eriksson Aug 08 '18 at 12:08
  • @MagnusEriksson thanka to all :)) – johnDoe Aug 08 '18 at 12:30

1 Answers1

1

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

Jan Myszkier
  • 2,714
  • 1
  • 16
  • 23
  • hi, thanks, i get little confused, could you explain little bit more how should i implement first method (jQuery way) – johnDoe Aug 08 '18 at 12:19
  • see this about jquery way (which is also not efficient, so beware): https://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery – Jan Myszkier Aug 08 '18 at 12:25
  • thanks, I think my method is better in my case, I need to use many document.createElement() function to achieve the same, which i think won't be very efficient, thanks :) – johnDoe Aug 08 '18 at 12:29