我如何正确使用json

Question

I want to send data from php to a browser using JSON. I think I understand the process - see my example code below. But someone told me this is not the right way to do it. I have been researching for three days but because my English is poor I am not confident that I have found an answer.

What I am hoping for is a sample of code that will receive the JSON and pour it into html elements such as a div, and give it style via CSS, etc.

I really just want an example of how to do this so that I can learn from it and expand it myself for my own needs, but I am unconfident that this approach is correct and do not want to write more bad code.

Thanks

Javascript

$(document).ready(function() {
    $.ajax({
        type : 'POST',
        url : 'server.php',
        dataType:"json",
        success : function (data) { 
            $("#orders").html(JSON.stringify(data));
        }
    }); 
});

PHP

<?php 
    $db = new PDO('mysql:host=localhost;dbname=Contact', 'root', '');
    $statement=$db->prepare("SELECT * FROM myfeilds");
    $statement->execute();
    $results=$statement->fetchAll(PDO::FETCH_ASSOC);
    $json=json_encode($results);
    echo $json;
?>

Answer 1

$(document).ready(function() {
    $.ajax({
        type : 'POST',
        url : 'server.php',
        dataType:"application/json",
        success : function (data) { 
           var jsns=JSON.parse(data);
           $("#orders").html("");//clear the div
           for(var i in data)
           {
             var id = data[i].id;
             var name = data[i].name;
             $("#orders").append("<span>"+id+"-"+name+</span>);//append each element
           }
        }
    }); 
});

Since your server side php is already returning json.. you can just loop through the array of objects after converting it into JSON and then do DOM manipulation.

The best way to do it would be to use some templating engine like underscore.js