数码资讯

PHP的json_encode()函数与JSON对象

2023-08-12 阅读 229

一、问题描述这周搬砖的时候，前端通过ajax获取后端的数据后，照例用对象.属性的方式取值，然而结果总是总是不能如预期般展示在页面上。先写个 demo 还原下场景：选中一个下拉框列表选项后，会在下拉框下面展示文字。这是下拉框的html部分： JSON</p> </header> <div class="article-commercial in-article"> <strong>选购提示</strong> <span>关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。</span> </div> <div class="article-body"> <p>一、问题描述<br> 这周搬砖的时候，前端通过ajax获取后端的数据后，照例用 <code>对象.属性</code> 的方式取值，然而结果总是总是不能如预期般展示在页面上。<br> 先写个 demo 还原下场景：选中一个下拉框列表选项后，会在下拉框下面展示文字。<br> 这是下拉框的html部分：</p> <pre ><html> <head> <title>JSON DEMO</title> <meta charset="UTF-8"> </head> <body> <select > <option value="">终端设备</option> <option value="1">PC Web</option>  </select> <div ></div> </body> </html></pre> <p>PHP代码如下：用来返回数据（接收、处理过程略）</p> <pre ><?php $onLines = [ 1 => 'PC Web', 2 => 'iPad HD', 5 => 'Touch' ]; echo json_encode(['data' => $onLines]);</pre> <p>JS代码如下：</p> <pre ><script type="text/javascript"> $("#device").change(function() { var selectVal = $("#device").val(); if (selectVal == '') { $("#tip").html(''); return; } # code... ajax 部分的代码见下 }); </script></pre> <p>ajax 部分的代码用来接收从后端（PHP）传过来的数据，并处理。</p> <pre >$.ajax({ url: 'device.php', type: 'post', dateType: 'json', data: { device: selectVal }, success: function(result) { var onlineDevices = result.data; var onlineTip = '允许' + onlineDevices[selectVal] + '类型的2台设备同时在线。'; $("#tip").html(''); $("#tip").append(onlineTip); } });</pre> <p>使用 <code>console.log</code> 在控制台输出结果，如下图所示，可以看到后端返回的数据是没有问题的，<br> 再使用 <code>typeof</code> 查看返回的数据类型，前端收到的数据是JSON字符串！而不是JSON对象！</p> <pre>success: function(result) { console.log(result); console.log(result.data); console.log(typeof result); }</pre> <p></p> <p>二、解决方法<br> 找到问题就好办了，只需要把 json 字符串转成 json 对象就好了，最简单的办法是 <code>JSON.parse()</code>。</p> <pre >success: function(result) { var onlineDevices = JSON.parse(result).data; # code ... }</pre> <p>三、总结<br> 1、json字符串和json对象的区别</p> <pre >// JSON 字符串 var str1 = '{"data":{"1":"PC Web","2":"iPad HD","5":"Touch"}}'; // JSON 对象 var str2 = {"data":{"1":"PC Web","2":"iPad HD","5":"Touch"}}; console.log(str1); console.log(typeof str1); console.log(str2); console.log(typeof str2);</pre> <p>可以看到json字符串和json对象的形式很像，但前者比后者多了一对引号，其内容包含在引号里了。调试台的结果如下：<br> </p> <p>2、json字符串转为json对象的方法<br> 后端</p> <ul> <li><p>设置header头中的内容类型，将 Content-Type 设置为 text/json。<br> <code>header(‘Content-Type:text/json;charset=utf-8‘);</code><br> 注：前端直接处理即可，不需要 JSON.parse() 处理。<br> 但项目中用的是框架，所有的PHP文件（业务层）均没有显式设置 header，虽然在demo中此方法有效，可依然不明白为什么别的地方返回的是json对象，而这里返回的却是json字符串了。</p></li> <li>强制类型转换(object) 此方法无效！<br> 如果将一个对象转换成对象，它将不会有任何变化。如果其它任何类型的值被转换成对象，内置标准类 stdClass 的一个实例将被建立。<br> 以上面的数组为例，强制类型转换的结果如下：</li> </ul> <pre >var_dump((object)['data' => $onLines]); // 结果如下： object(stdClass)#1 (1) { ["data"]=> array(3) { [1]=> string(6) "PC Web" [2]=> string(7) "iPad HD" [5]=> string(5) "Touch" } }</pre> <p>而<code>json_encode((object)[‘data‘ => $onLines]);</code>得到的还是json字符串。</p> <p>前端</p> <ul> <li>var obj = JSON.parse(str);<br> JSON.parse()方法，必须保证传入的是json字符串，如果是json对象会报错。<br> </li> <li>var obj = jQuery.parseJSON(str);<br> parseJSON()方法是jQuery方法，仅支持标准json格式，否则会报错。<br> 下面这些是无效的 JSON 字符串：</li> </ul> <pre>"{test: 1}" //test是属性名称，必须加双引号 "{'test': 1}" //test是属性名称，必须用双引号(不能用单引号) "'test'" //test是属性名称，必须用双引号(不能用单引号) "undefined" //undefined 不能表示一个 JSON 字符串; null可以 "NaN" //NaN 不能表示一个 JSON 字符串; 用Infinity直接表示无限也是不允许的</pre> <p></p> <ul> <li>var obj = eval(‘(‘ + str + ‘)‘);<br> eval()方法是js方法，也是必须保证传入的是json字符串，否则会报错。<br> </li> </ul> <p>四、疑惑<br> 查了一下PHP的 json_encode()函数，PHP手册给出的结论是成功时返回字符串。<br> Return Values<br> Returns a JSON encoded string on success or FALSE on failure.</p> <p>既然json_encode()函数返回的是字符串，为什么在项目中其他地方可以直接使用 <code>对象.属性</code> 的方式呢？</p> </p> </p> <p> </p></p> </p> </div> <div class="article-note"> <strong>声明：</strong>本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。 </div> <nav class="article-pn" aria-label="上下篇"> <div class="pn-item">上一篇：<a href="/b/648940.html" title="elasticsearch2.0学习之路（一）es在linux中的安装和集群配置">elasticsearch2.0学习之路（一）es在linux中的安装和集群配置</a></div> <div class="pn-item">下一篇：<a href="/b/648943.html" title="在wps表格中导入数据分析(在wps里进行数据分析)">在wps表格中导入数据分析(在wps里进行数据分析)</a></div> </nav> <nav class="article-after" aria-label="相关文章"> <div class="section-title">同栏目相关推荐</div> <ul class="related-list"> <li><a href="/b/749577.html" title="有哪些ai工具制作logo比较方便">有哪些ai工具制作logo比较方便</a></li> <li><a href="/b/749522.html" title="如何保护计算机免受USB黑客攻击">如何保护计算机免受USB黑客攻击</a></li> <li><a href="/b/749322.html" title="s8分屏快捷键(三星s8能分屏操作)">s8分屏快捷键(三星s8能分屏操作)</a></li> <li><a href="/b/749315.html" title="怎么设置傲游浏览器智能填表傲游云浏览器如何智能填表">怎么设置傲游浏览器智能填表傲游云浏览器如何智能填表</a></li> <li><a href="/b/749311.html" title="wps跳转到相应页面(使wps中自动生成的目录有直接跳转到目录对应内容的页面)">wps跳转到相应页面(使wps中自动生成的目录有直接跳转到目录对应内容的页面)</a></li> <li><a href="/b/749309.html" title="计算机截图快捷键(计算机截图快捷键win7)">计算机截图快捷键(计算机截图快捷键win7)</a></li> </ul> </nav> </article> <div class="layui-col-md4"> <aside class="sidebar"> <section class="side-box side-ad"> <div class="side-title">广告与合作</div> <div class="ad-placeholder"> <strong>品牌合作位</strong> <p>支持数码产品、手机配件、智能硬件、软件服务等合作展示。</p> <span>联系站长投放广告</span> </div> </section> <section class="side-box"> <div class="side-title">推荐阅读</div> <ul class="side-list"> <li><a href="/b/749582.html" title="智能手环/手表怎么选不踩坑：先按七个维度对号入座，别只看参数表">智能手环/手表怎么选不踩坑：先按七个维度对号入座，别只看参数表</a></li> <li><a href="/b/749581.html" title="2026年买笔记本别只看处理器：六个最容易踩的坑，看懂再掏钱">2026年买笔记本别只看处理器：六个最容易踩的坑，看懂再掏钱</a></li> <li><a href="/b/749580.html" title="2026年换手机怎么选：处理器、屏幕、影像和续航四项参数一次看懂">2026年换手机怎么选：处理器、屏幕、影像和续航四项参数一次看懂</a></li> </ul> </section> <section class="side-box"> <div class="side-title">热门主题</div> <div class="topic-list"> <a class="" href="/">首页</a> <a class="" href="/93230406/">手机</a> <a class="" href="/93230407/">电脑办公</a> <a class="" href="/93230408/">智能硬件</a> <a class="" href="/93230409/">数码配件</a> <a class="" href="/93230410/">摄影音频</a> <a class="active" href="/93230411/">数码资讯</a> </div> </section> </aside> </div> </div> </main> <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"PHP的json_encode()函数与JSON对象","description":"一、问题描述这周搬砖的时候，前端通过ajax获取后端的数据后，照例用对象.属性的方式取值，然而结果总是总是不能如预期般展示在页面上。先写个 demo 还原下场景：选中一个下拉框列表选项后，会在下拉框下面展示文字。这是下拉框的html部分： <html> <head> <title>JSON","url":"https://www.shuma8.com/b/648941.html","mainEntityOfPage":"https://www.shuma8.com/b/648941.html","author":{"@type":"Organization","name":"数码吧","url":"https://www.shuma8.com/"},"publisher":{"@type":"Organization","name":"数码吧","logo":{"@type":"ImageObject","url":"https://www.shuma8.com/apple-touch-icon.png"}},"datePublished":"2023-08-12","dateModified":"2023-08-12"}</script> <footer class="site-footer"> <div class="layui-container footer-inner"> <div> <strong>数码吧</strong> <p>聚合手机、数码产品、智能硬件与消费电子内容，帮助用户更快完成了解、比较和购买决策。</p> </div> <div class="footer-nav"> <strong>栏目导航</strong> <div class="footer-nav-links"> <a href="/" title="首页">首页</a> <a href="/93230406/" title="手机">手机</a> <a href="/93230407/" title="电脑办公">电脑办公</a> <a href="/93230408/" title="智能硬件">智能硬件</a> <a href="/93230409/" title="数码配件">数码配件</a> <a href="/93230410/" title="摄影音频">摄影音频</a> <a href="/93230411/" title="数码资讯">数码资讯</a> </div> </div> <div class="footer-links"> <a href="/">首页</a> <a href="/sitemap.xml">网站地图</a> <span>© 2026 www.shuma8.com</span> </div> </div> </footer> <script src="/class/layui/layui.js"></script><script> layui.use(['jquery'], function(){ var $ = layui.$; $('.nav-toggle').on('click', function(){ $('.site-nav').toggleClass('open'); }); }); </script>  <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id:"LBT1Ygk917sijyEX",ck:"LBT1Ygk917sijyEX"})</script> <script>(function(){var cltj=document.createElement("script");cltj.src="//www.shuma8.com/tongji/?v=1.4";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(cltj,s);})();</script></body> </html>