Cách tốt nhất để hiển thị dữ liệu qua JSON bằng cách sử dụng jQuery

Tôi đang cố tìm cách tốt nhất để hiển thị kết quả trên trang của tôi thông qua một cuộc gọi Ajax bằng jQuery, bạn có nghĩ cách tốt nhất là chuyển nó thành JSON hoặc văn bản thuần túy không? Tôi đã làm việc với các cuộc gọi ajax trước đây, nhưng không chắc chắn cái nào được ưu tiên hơn cái kia và cho phiên bản JSON cách tốt nhất để đọc từ một tệp JSON được tạo ra bởi một trang PHP để hiển thị các kết quả của tôi là gì.Cách tốt nhất để hiển thị dữ liệu qua JSON bằng cách sử dụng jQuery

tôi biết tôi sẽ bao gồm .each để chạy qua nó để hiển thị tất cả.

Nguồn

2008-11-29 Coughlin

Coughlin/Ryan, chỉnh sửa câu hỏi của bạn để phản ánh cuộc thảo luận dưới đây. Phần câu trả lời không được thiết kế để thảo luận (thay vì sử dụng các bình luận cho mục đích đó hoặc cập nhật câu hỏi của bạn với các chi tiết bổ sung). –

Something như thế này:

$.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"); 
      }); 
     });

Sẽ mất một đối tượng json làm từ một mảng PHP trở lại với phím của sản phẩm. ví dụ:

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' 
            ) 
         ) 
    )

Để tải lại danh sách các bạn sẽ chỉ cần làm:

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

Và sau đó gọi getJSON một lần nữa với các thông số mới.

Nguồn

2008-11-29 15:53:37 Jay

Vì lý do hiệu suất mà $ (content) .appendTo ("# product_list") nên nằm ngoài vòng lặp. Việc thêm vào DOM chậm và chỉ nên thực hiện một lần. –

Có nghĩa là phải như thế nào và dòng đầu tiên phải là nội dung + = nếu đó là trường hợp. Tuy nhiên phụ thêm vào DOM là nhanh hơn trong một số trình duyệt hơn những người khác :) – Jay

JQuery có một kiểu dữ liệu json sẵn có cho Ajax và chuyển đổi dữ liệu thành một đối tượng. PHP% cũng có hàm json_encode sẵn có chuyển đổi một mảng thành chuỗi có định dạng json. Tiết kiệm rất nhiều phân tích cú pháp, giải mã nỗ lực.

Nguồn

2008-11-29 06:45:06 braindead

Bạn có thể tạo một đối tượng jQuery từ một đối tượng JSON:

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

Nguồn

2008-11-29 06:53:24 strager

Hoàn hảo! Cảm ơn bạn Jay, dưới đây là HTML của tôi:

<!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 rel="stylesheet" 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>

Và JSON của tôi kết quả đầu ra:

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

tôi nhận được lỗi này, khi tôi chạy mã của tôi:

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

Nguồn

2008-11-29 16:08:08 Coughlin

tôi đã nhận nó, tôi đã thay đổi: \t \t $ .each (data.posts, chức năng (i, bưu điện) { Vì vậy data.post -> Xóa dữ liệu .posts – Coughlin

Cách tốt nhất để hiển thị dữ liệu qua JSON bằng cách sử dụng jQuery

Trả lời

Các vấn đề liên quan