CODEWITHSUNDEEP
phphtmlmysqlajaxformat
DJ22T
DJ22T

Reputation: 1640

Best practice when loading data between PHP + Ajax in the document

For a start this might be already posted or duplicated on SO but to be honest i couldn't find an answer for this that might fulfill my requirements or clarify my confussion, perhaps i'm too tired and couldn't find it, if that's the case please link me to it and i will totally appreciate it.

I have a custom CMS for my company that i have been modifying and upgrading for years, lately i decided to dedicate a lot of time to it (i know there are plenty frameworks and CMS out there, but this code was made from scratch and it's a challenge so that's why)

Suppose that i have some html with certain data and i want to insert that data into one table in the DB

In that part ajax do the job just fine

$.ajax({
   type: "POST",
   url: "requests/add-data.php",
   data: dataString,
   cache: false,
   success: function(data){
     /** Success response  or append data **/

   }
})

So after inserting the values in the database, i need to query some additional information on the same process, and i need to give a format to that data i just pulled from the DB. let's put a example in html format.

<div>
 <ul>
  <li>
    <p>[title from x value on DB]</p>
     <span>[other values retrieved from the same Query]</span>
      <img src="[image retrieved]" />
  </li>
 </ul>
</div>

Point is that HTML structure doesn't exists in the document, i have to append it to some div with x id on the doc.

normally i build the HTML structure in the PHP file i just called from ajax and append that content with the ajax success.

 $("#target-element").append(data);

Anyway question is, is that a good practice or not?

if not what's the best way to do it? what will you guys advice in such case?

Thanks in advance for your answers.

Upvotes: 3

Views: 2808

Answers (2)

MarcoS
MarcoS

Reputation: 17711

If your HTML is not static, you have to generate it, of course.

I too prefer doing it on client-side (Javascript).

If you use jQuery, you could do, for example:

var list = $('<ul/>').appendTo('#parentContainer');
for (var i = 0; i < n; i++) {
    list.append(
         '<li>' +
             '<p>' + '[title from x value on DB]' + '</p>' +
             '<span>' + '[other values retrieved from the same Query]' + '</span>' +
             '<img src="' + '[image retrieved]' + '" />' +
         '</li>'
    );
}

UPDATE 1: The above code should be placed inside the

 success: function(data) {
     /** Success response or append data **/
 }

Accessing data depends on the MIME type of the response from the server script; usually it's JSON; if you do not specify a dataType in your ajax call, the default is "Intelligent Guess" (see "dataType" section in jquery ajax documentation).

However, you access retrieved values from the "data" parameter. For example:

[image retrieved] could be for example data.img_src ...

UPDATE 2: On the server side you can not return a resource (result set), but have to return the real data.

Here is an example for MySQL, but it can be easily generalized...):

<?php
    $resource = mysql_query("SELECT * FROM table WHERE id='$id'");
    $results = array();
    while($row = mysql_fetch_array($resource)) {
       $results[] = array(
          'title' => base64_decode($row['title']),
          'otherValue' => $row['otherValue'],
          'imgSrc' => $row['imgSrc']
       );
    }
    $json = json_encode($results);
    header('Content-Type: application/json');
    print $json;
?>

Upvotes: 3

Paulo Victor
Paulo Victor

Reputation: 926

It depends on your coding habits and practices. Speaking for myself, I like to keep all presentation code within Javascript/HTML and all domain code (databases querys and such) on the back end code (be it Java, Scala, PHP...).

So for your example, I would query PHP for a JSON object and build the HTML inside the Javascript code. That way, you can always re-use your back-end for a future mobile app, for example.

I can cite a number of very good articles on Separation of Concerns that back up my practice, but then again it's all up to the developer. If you don't plan on reusing your back-end code with another front-end, stick with the practice you feel more comfortable with.

For reference: http://en.wikipedia.org/wiki/Separation_of_concerns

Hope that helps you on further reading :)

Upvotes: 1

Related Questions