jquery ajax获取json并解析,获取的json是object对象格式

2018/05/29 18:23
阅读数 3

<div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post"> <div class="markdown_views"> <p>首先我们使用的是ajax方式,推荐一个学习网址: <br> <a href="http://blog.csdn.net/shiyaru1314/article/details/51065410" target="_blank">http://blog.csdn.net/shiyaru1314/article/details/51065410</a> <br> 这个博主写的特别好。现在来看我们的例子: <br> 这里是没有参数的get方式:</p>

<pre class="prettyprint" name="code"><code class="hljs lua has-numbering"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">tryapitest</span><span class="hljs-params">()</span></span>{</br> $.ajax({</br> url:<span class="hljs-string">"/api/category/top/all"</span>,</br> <span class="hljs-built_in">type</span>:<span class="hljs-string">"get"</span>,</br> dataType:<span class="hljs-string">"json"</span>,</br> success: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span></span> {</br> console.log(data); </br> },</br> <span class="hljs-built_in">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(XMLHttpRequest, textStatus, errorThrown)</span></span> {</br> alert(XMLHttpRequest.status);</br> alert(XMLHttpRequest.readyState);</br> alert(textStatus);</br> },</br> })</br> }</code></pre>

<p>控制台打印出的数据如下: <br> <img src="https://img-blog.csdn.net/20170718174948781?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdpbmtsZTJzdGFy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="控制台信息" title=""> <br> 可以看到,我们获取的data由三级组成:ststus,msg,data; <br> 那么接下来,我们需要获取data:Array(12)这个数据; <br> 因此在success函数里面添加如下:</p>

<pre class="prettyprint" name="code"><code class="hljs lasso has-numbering"> success: function(<span class="hljs-built_in">data</span>) {</br> <span class="hljs-comment">//console.log(data);</span></br> <span class="hljs-built_in">var</span> item<span class="hljs-subst">=</span><span class="hljs-built_in">data</span><span class="hljs-built_in">.</span><span class="hljs-built_in">data</span>;</br> console<span class="hljs-built_in">.</span><span class="hljs-keyword">log</span>(item);</br> }</br> },</code></pre>

<p>此时查看console控制台的输出信息: <br> <img src="https://img-blog.csdn.net/20170718175629620?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdpbmtsZTJzdGFy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="控制台信息2" title=""> <br> 可以看到此时已经获得Object的信息了,但是如果需要获取Object里面具体的属性,必须要将Object进行遍历: <br> 代码如下:</p>

<pre class="prettyprint" name="code"><code class="hljs javascript has-numbering"> success: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> {</span></br> <span class="hljs-comment">//console.log(data);</span></br> <span class="hljs-keyword">var</span> item=data.data;</br> <span class="hljs-comment">//console.log(item);</span></br> <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;item.length;i++){</br> console.log(item[i]);</br> }</br> },</code></pre>

<p>查看控制台的信息: <br> <img src="https://img-blog.csdn.net/20170718175930882?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdpbmtsZTJzdGFy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="控制台信息3" title=""> <br> 此时就可以获取对应的数据和属性啦。Object对象必须要遍历之后才可以获取里面的属性,直接item.id是不可以的,必须要item[i].id才可以。 <br> 我们可以将属性打印在网页上,代码如下:</p>

<pre class="prettyprint" name="code"><code class="hljs handlebars has-numbering"><span class="xml"> success: function(data) {</br> //console.log(data);</br> var item=data.data;</br> // console.log(item);</br></br> var htm = "";</br> htm += "<span class="hljs-tag">&lt;<span class="hljs-title">table</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">thead</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">th</span>&gt;</span>ID<span class="hljs-tag">&lt;/<span class="hljs-title">th</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">th</span>&gt;</span>name<span class="hljs-tag">&lt;/<span class="hljs-title">th</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">th</span>&gt;</span>enName<span class="hljs-tag">&lt;/<span class="hljs-title">th</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">tr</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">thead</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">tbody</span>&gt;</span>";</br> for(var i=0;i<span class="hljs-tag">&lt;<span class="hljs-title">item.length;i++){</br> </span> //<span class="hljs-attribute">console.log</span>(<span class="hljs-attribute">item</span>[<span class="hljs-attribute">i</span>]<span class="hljs-attribute">.name</span>);</br></br> <span class="hljs-attribute">htm</span> += '&lt;<span class="hljs-attribute">tr</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">td</span>&gt;</span>' + item[i].id + '<span class="hljs-tag">&lt;/<span class="hljs-title">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">td</span>&gt;</span>'</br> + item[i].name + '<span class="hljs-tag">&lt;/<span class="hljs-title">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">td</span>&gt;</span>'</br> + item[i].enName + '<span class="hljs-tag">&lt;/<span class="hljs-title">td</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">td</span>&gt;</span>';</br> }</br> htm += '<span class="hljs-tag">&lt;/<span class="hljs-title">tbody</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">table</span>&gt;</span>';</br> $("#apitesttry").append(htm);</br> },</span></code></pre>

<p>页面展示如下: <br> <img src="https://img-blog.csdn.net/20170718181051237?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdHdpbmtsZTJzdGFy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="页面展示" title=""> <br> 这里使用的是for方法进行循环,还有each等方法,博主自己目前才学习到这里,遇到其他难点再来给大家分享吧~</p> </div> <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css"> </div>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部