先创建下面的两个文件，并将代码拷贝进去，然后打开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标签：

使用json把php数据传给js处理的更多相关文章

  1. 将从model中获得的数据传到js函数中

    刚遇到了一种情况,从controller中获得的model是一个集合,需要将这个集合循环放到标签中,并且需要为这些标签添加点击事件,每个值传入对应的点击事件函数中,由于model中的值是通过${ite ...

  2. 后端把Long类型的数据传给前端，前端可能会出现精度丢失的情况，以及解决方案

    后端把Long类型的数据传给前端,前端可能会出现精度丢失的情况.例如:201511200001725439这样一个Long类型的整数,传给前端后会变成201511200001725440. 解决方法: ...

  3. IE8下导入EXCEL数据传到客户端以附件下载

    IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...

  4. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  5. 怎样把vector和string数据传给旧的C API

     通常情况下.旧的C API使用数组合char*指针来进行数据交换而不是vector或string对象. 这种API还将存在非常长的一段时间,假设我们想有效地使用STL.我们就必须与它们和平共处. ...

  6. struts2中，Action通过什么方式获得用户从页面输入的数据，又是通过什么方式把其自身的数据传给视图的？

    struts2中,Action通过什么方式获得用户从页面输入的数据,又是通过什么方式把其自身的数据传给视图的? 解答: 1)可以直接通过与表单元素相同名称的数据成员(需要存在符合命名规范set和get ...

  7. 《条目十六》如何将vector和string的数据传给遗留的API

    <条目十六>如何将vector和string的数据传给遗留的API 优秀的代码是可以延续的,所以并非所有的代码都是重构的,而且有时候重构会对整个系统影响较大,投入巨大,得不偿失.然而,也不 ...

  8. 【pytest官方文档】解读- 如何自定义mark标记，并将测试用例的数据传递给fixture函数

    在之前的分享中,我们知道可以使用yield或者return关键字把fixture函数里的值传递给test函数. 这种方法很实用,比如我在fixture函数里向数据库里插入必要的测试数据,那我就可以把相 ...

  9. 后台返回的json数据传到前端页面并在页面的表格中填充

    web前端页面: <table id="myTable" cellpadding="1" cellspacing="0" border ...

随机推荐

  1. 86 ipmitools-查看硬件信息工具

    1．简介 IPMI(Intelligent Platform Management Interface)即智能平台管理接口是使硬件管理具备"智能化"的新一代通用接口标准.用户可以利 ...

  2. UITableView的使用

    参考:IOS7.0 programming cookbook. http://www.cnblogs.com/kenshincui/p/3931948.html http://blog.csdn.ne ...

  3. 线段树 HDU 3308

    t 题目大意:给你n个数,m个操作.操作有两种:1.U x y 将数组第x位变为y   2. Q x y 问数组第x位到第y位连续最长子序列的长度.对于每次询问,输出一个答案 #include< ...

  4. 【USACO 3.1】Contact（01子串按出现次数排序）

    题意:给你一个01字符串,将长度为a到b之间(包含a.b)的子串按照出现次数排序.注意输入输出格式 题解:01子串对应一个二进制,为了区别11和011这样的不同子串,我们把长度也记录下来,官方题解是在 ...

  5. 解决：/bin/bash: mvn: 未找到命令

    在终端执行: sudo apt-get install maven

  6. SHOI2016游记&滚粗记&酱油记

    Day0 学校刚期中考完,全科血崩,感觉这次真要考不到一本线了tat 晚上写了个可持久化trie的题,也懒得敲板子(上个礼拜都敲过了),就碎叫了 Day1 上午起床吃饭水群看球,吃完中饭就去考场了. ...

  7. UIView的setNeedsDisplay和setNeedsLayout

    1,UIView的setNeedsDisplay和setNeedsLayout方法 首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到  UI ...

  8. EL表达式不解析

    使用EL表达式时,遇到了页面直接显示"time: ${requestScope.time}",不解析的情况.查找资料原因是:在默认情况下,Servlet 2.3 / JSP 1.2 ...

  9. 100 个 Linux 常用命令大全

    1.ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a 列出包括.a开头的隐藏文件的所有文件 -A 通-a,但不列出"."和".." -l 列出 ...

  10. 浅谈：深入理解struts2的流程已经spring和struts2的整合

    第一步:在tomcat启动的时候 1.在tomcat启动的时候,首先会加载struts2的核心过滤器StrutsPrepareAndExecuteFilter <filter> <f ...