blocks|key|1679325|text|JQuery具有用于Ajax的内置json数据类型，并将数据转换为对象。PHP%25还有内置的json_encode函数，可以将数组转换为json格式的字符串。节省了大量的解析和解码工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1679326|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>JQuery has an inbuilt json data type for Ajax and converts the data into a object. PHP% also has inbuilt json_encode function which converts an array into json formatted string. Saves a lot of parsing, decoding effort.</p>


blocks|key|1464167|text|您可以从JSON对象创建jQuery对象：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464168|$.getJSON(url,+data,+function(json)+{
++++$(json).each(function()+{
++++++++/*+YOUR+CODE+HERE+*/
++++});
});|code-block|syntax|javascript|1464169|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can create a jQuery object from a JSON object:</p>

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


blocks|key|1679488|text|如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1679489|$.getJSON("http://mywebsite.com/json/get.php?cid=15",
++++++++function(data){
++++++++++$.each(data.products,+function(i,product){
++++++++++++content+=+'<p>'+%2B+product.product_title+%2B+'</p>';
++++++++++++content+%2B=+'<p>'+%2B+product.product_short_description+%2B+'</p>';
++++++++++++content+%2B=+'<img+src="'+%2B+product.product_thumbnail_src+%2B+'"/>';
++++++++++++content+%2B=+'<br/>';
++++++++++++$(content).appendTo("#product_list");
++++++++++});
++++++++});|code-block|syntax|javascript|1679490|将接受一个由PHP数组生成的json对象，该数组与products的键一起返回。例如：|1679491|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'
++++++++++++++++++++++++++++++++++++)
+++++++++++++++++++++++++)
+++++)|1679492|要重新加载列表，只需执行以下操作：|1679493|$("#product_list").empty();|1679494|然后使用新参数再次调用getJSON。|1679495|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Something like this:</p>

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

<p>Would take a json object made from a PHP array returned with the key of products. e.g:</p>

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

<p>To reload the list you would simply do:</p>

<pre><code>$("#product_list").empty();
</code></pre>

<p>And then call getJSON again with new parameters.</p>


blocks|key|1464349|text|太棒了！谢谢你，Jay，下面是我的HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464350|<!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"+/>

<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+%2B=+'<p>'+%2B+post.post_author+%2B+'</p>';
++++++++++++content+%2B=+'<p>'+%2B+post.post_content+%2B+'</p>';
++++++++++++content+%2B=+'<p'+%2B+post.date+%2B+'</p>';
++++++++++++content+%2B=+'<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>|code-block|syntax|javascript|1464351|和我的JSON输出：|1464352|{+posts:+[{"id":"1","date_added":"0001-02-22+00:00:00","post_content":"This+is+a+post","author":"Ryan+Coughlin"}]}|1464353|当我运行我的代码时，我得到了这个错误：|1464354|object+is+undefined
http://localhost:8888/rks/post/js/jquery.js
Line+19|1464355|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Perfect! Thank you Jay, below is my HTML:</p>

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

<p>And my JSON outputs:</p>

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

<p>I get this error, when I run my code:</p>

<pre><code>object is undefined
http://localhost:8888/rks/post/js/jquery.js
Line 19
</code></pre>


<p>i am trying to find the best way to display results on my page via an Ajax call using jQuery, do you think the best way is to pass it as JSON or plain text? I have worked with ajax calls before, but not sure which is preferred over the other and for the JSON version what is the best way to read from a JSON file generated by a PHP page to display my results.</p>

<p>i know I would include a <code>.each</code> to run through it to display them all.</p>


Best way to display data via JSON using jQuery

我正在尝试通过使用jQuery的Ajax调用在我的页面上显示结果的最佳方法，您认为最好的方法是将其作为JSON或纯文本传递吗？我以前使用过ajax调用，但不确定哪个更好，对于JSON版本，从PHP页面生成的JSON文件中读取以显示结果的最佳方式是什么。我知道我会包含一个.each来遍历它来显示它们。

问使用jQuery通过JSON显示数据的最佳方式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery通过JSON显示数据的最佳方式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery通过JSON显示数据的最佳方式
EN