使用json把php数据传给js处理

先创建下面的两个文件，并将代码拷贝进去，然后打开json.html文件：

json.html文件：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>json测试</title><style type="text/css">body {text-align:center;}.image {width: 240px;border:2px solid #EEE;margin-top: 30px;}</style></head><body><div><img src="#" class="image"></div><div><img src="#" class="image"></div></body><script type="text/javascript" language="javascript">function loadjson( _json ){if( _json ){var imgs = document.getElementsByClassName('image');for(var i=0; i < _json.length && i < imgs.length; i++){//console.log(_json[i].src);//console.log(_json[i].title);//console.log(_json[i].alt);
                    imgs[i].src = _json[i].src;imgs[i].title = _json[i].title;imgs[i].alt = _json[i].alt;}}}function getjson() {var xhr = new XMLHttpRequest();xhr.open('GET', 'json.php', true);xhr.onreadystatechange = function() {if(xhr.readyState == 4) {var resText = xhr.responseText;//console.log(resText);var jsonstr = eval(resText);loadjson(jsonstr);}};xhr.send(null);}getjson();</script>
</html>

json.php文件：

<?php$arr = array(array('src' => 'https://p.ssl.qhimg.com/t01d1f1a2ae31e3c3e4.png',   'title' => '360搜索，SO靠谱','alt' => '360搜索'),  array('src' => 'https://www.baidu.com/img/bd_logo1.png', 'title' => '百度一下，你就知道','alt' => '百度'),
);$jsonstr = json_encode($arr); // 转换成json数据存储格式echo $jsonstr;?>

下面是结果，将从php传来的json数据解析后赋给img标签：

转载于:https://www.cnblogs.com/wuqianling/p/5671824.html

使用json把php数据传给js处理相关推荐

vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
angular里的filter过滤数据传参
在ng-repeat中使用过滤器filter ,则在filter闭包内第一个参数,就是ng-repeat中的原数组,其余参数可以在-repeat表达式中,使用filterName :param1 :p ...
echarts导入mysql数据库_Echarts最新:Django中从mysql数据库中获取数据传到echarts方式_爱安网 LoveAn.com...
关于"Echarts"的最新内容聚合阅读这篇文章主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随 ...
python echarts mysql python_Django中从mysql数据库中获取数据传到echarts方式
尝试了几种方法,感觉过于复杂,于是自己写了一个方法. (1)首先在要绘图的页面传入从数据库中提取的参数,这一步通过views可以实现: (2)然后是页面加载完成时执行的函数ready,调用方法f; ( ...
后端把Long类型的数据传给前端，前端可能会出现精度丢失的情况，以及解决方案...
后端把Long类型的数据传给前端,前端可能会出现精度丢失的情况.例如:201511200001725439这样一个Long类型的整数,传给前端后会变成201511200001725440. 解决方法: ...
qtableview点击行将整行数据传过去_可以实时获取数据的Database Asset插件
前言:Goby之前开放的插件入口点较少,大家只能在扫描前.扫描后执行事件,无法参与扫描过程中来.为实现更多场景的应用及提高扫描效率(如:后台爆破子域名等),Goby开放了一些新的API:事件通知机制. ...
vue 父组件获取接口值传到子组件_vue父组件异步获取数据传给子组件的方法
但是现在问题是父组件的数据是异步获取的,而子组件一开始就会渲染,如果此时没有传入数据,而子组件又要用到数据中的length属性时就会报错: 怎么办呢?最简单的办法就是让子组件条件渲染,当有数据的时候才 ...
python django mysql结果获取_Django中从mysql数据库中获取数据传到echarts方式
尝试了几种方法,感觉过于复杂,于是自己写了一个方法. (1)首先在要绘图的页面传入从数据库中提取的参数,这一步通过views可以实现: (2)然后是页面加载完成时执行的函数ready,调用方法f; ( ...
从服务器请求文件流工具类,SpringBoot我想获取图片流，然后将图片流的数据传到服务器上...
我想获取图片流,然后将图片流的数据传到服务器上这行好像是获取图片流的,但是这个buffers我怎么传递给服务器我想把buffers作为参数传给口,不知道怎么实现?ByteBuffer buffer ...
【Android RTMP】x264 图像数据编码 ( Camera 图像数据采集 | NV21 图像数据传到 Native 处理 | JNI 传输字节数组 | 局部引用变量处理 | 线程互斥 )
文章目录安卓直播推流专栏博客总结一. NV21 数据传入 Native 层二. jbyte * 数据类型 ( Java 中的 byte[] 数组传入 JNI 处理方式 ) 三. 局部引用处理四 ...

使用json把php数据传给js处理

使用json把php数据传给js处理相关推荐

最新文章

热门文章