Le meilleur moyen d'afficher des données via JSON à l'aide de jQuery

je suis en train d'essayer de trouver la meilleure façon d'afficher les résultats sur ma page via un appel Ajax à l'aide de jQuery, pensez vous que le meilleur moyen est de passer comme JSON ou texte brut? J'ai travaillé avec des appels ajax avant, mais vous ne savez pas qui est privilégié par rapport à l'autre, et pour la version JSON quelle est la meilleure façon de lire à partir d'un fichier JSON généré par une page PHP pour afficher mes résultats.

je sais que j'aimerais inclure un .each à courir à travers elle pour les afficher tous.

Coughlin/Ryan, de modifier une question à rendre compte de la discussion ci-dessous. La réponse n'est pas conçu pour la discussion (plutôt utiliser les commentaires pour cet effet ou de mise à jour de votre question avec plus de détails).

InformationsquelleAutor Coughlin | 2008-11-29

jquery json

Quelque chose comme ceci:

$.getJSON("http://mywebsite.com/json/get.php?cid=15",
        function(data){
          $.each(data.products, function(i,product){
            content = '<p>' + product.product_title + '</p>';
            content += '<p>' + product.product_short_description + '</p>';
            content += '<img src="' + product.product_thumbnail_src + '"/>';
            content += '<br/>';
            $(content).appendTo("#product_list");
          });
        });

Serait prendre un objet json fabriqué à partir d'un tableau PHP retourné avec la clef de produits. e.g:

Array('products' => Array(0 => Array('product_title' => 'Product 1',
                                     'product_short_description' => 'Product 1 is a useful product',
                                     'product_thumbnail_src' => '/images/15/1.jpg'
                                    )
                          1 => Array('product_title' => 'Product 2',
                                     'product_short_description' => 'Product 2 is a not so useful product',
                                     'product_thumbnail_src' => '/images/15/2.jpg'
                                    )
                         )
     )

Pour recharger la liste il vous suffit de faire:

$("#product_list").empty();

Et ensuite appeler getJSON à nouveau avec de nouveaux paramètres.

Pour des raisons de performances que $(le contenu).appendTo("#product_list") doit être en dehors de la boucle. Ajoutant à DOM est lente et doit être fait en une seule fois.
Oui, c'est la façon dont il devrait être, et la première ligne doit être contenu += si c'est le cas. Cependant l'ajout de la DOM est plus rapide dans certains navigateurs que les autres 🙂

InformationsquelleAutor Jay

11

JQuery a une fonction intégrée de données json type d'Ajax et convertit les données dans un objet. PHP% intègre également json_encode fonction qui convertit un tableau en format json chaîne. Permet d'économiser beaucoup de fonctions d'analyse et de décodage de l'effort.

InformationsquelleAutor braindead

Parfait! Merci Jay, voici mon code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Facebook like ajax post - jQuery - ryancoughlin.com</title>
<link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="../css/print.css" type="text/css" media="print" />
<!--[if IE]><link  href="../css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link href="../css/highlight.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
    $.getJSON("readJSON.php",function(data){
        $.each(data.post, function(i,post){
            content += '<p>' + post.post_author + '</p>';
            content += '<p>' + post.post_content + '</p>';
            content += '<p' + post.date + '</p>';
            content += '<br/>';
            $(content).appendTo("#posts");
        });
    });   
});
/* ]]> */
</script>
</head>
<body>
        <div class="container">
                <div class="span-24">
                       <h2>Check out the following posts:</h2>
                        <div id="posts">
                        </di>
                </div>
        </div>
</body>
</html>

Et mon JSON sorties:

{ posts: [{"id":"1","date_added":"0001-02-22 00:00:00","post_content":"This is a post","author":"Ryan Coughlin"}]}

J'obtiens cette erreur, lorsque j'exécute mon code:

object is undefined
http://localhost:8888/rks/post/js/jquery.js
Line 19

Je l'ai eu, j'ai changé: $.chacun(des données.postes, function(i,post){ Afin que les données.post -> data.postes

InformationsquelleAutor Coughlin

Vous pouvez créer un objet jQuery à partir d'un objet JSON:

$.getJSON(url, data, function(json) {
    $(json).each(function() {
        /* YOUR CODE HERE */
    });
});

InformationsquelleAutor strager

Vous devez vous connecter pour publier un commentaire.