Как правильно использовать json ajax

Question

Я хочу отправить данные с php в браузер с помощью JSON. Я думаю, что я понимаю процесс - см. Мой примерный код ниже. Но кто-то сказал мне, что это неправильный способ сделать это. Я занимаюсь исследованиями в течение трех дней, но из-за плохого английского языка я не уверен, что нашел ответ.

То, что я надеюсь на это образец кода, который будет получать JSON и вылить его в HTML элементы, такие как DIV, и придать ему стиль с помощью CSS и т.д.

Я действительно просто хочу пример как это сделать, чтобы я мог учиться у него и расширять его самостоятельно для своих собственных нужд, но я не уверен, что этот подход верен и не хочет писать более плохой код.

Благодаря

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

Вам не нужно вызывать JSON.stringify на данных, которые получают возвращаемые в ответ. Этот метод предназначен для преобразования объекта javascript в строку JSON, но ваш PHP-код должен посылать строку JSON обратно по внешнему виду.

Так что все зависит от того, что ваш вернулся JSON выглядит, но, как правило, это будет что-то вроде этого:

{"name":"Mike", "phone":"5551234", ...} etc 

Так что в вашем успехе обратного вызова, вы могли бы сделать что-то вроде этого:

$("#name").text(data.name); 
$("#phone").text(data.phone); 

И так далее.

Обратите внимание, что я использую метод .text(). Вы можете использовать .html(), как вы сделали, но вы, вероятно, не нужны, если ваши JSON строка не содержит HTML или вы хотите, чтобы написать HTML следующим образом:

$("#name").html("<p>" + data.name + "</p>"); 

Как для укладки, я бы установкой ваши стили заранее, так что вам не нужно делать это в javascript, так как это будет более показательно.

Однако, если по какой-то причине вам нужно, то вы могли бы сделать что-то вроде:

$("#name").css({"display":block","color": "#000"}); 

Надежда, что помогает.