先创建下面的两个文件，并将代码拷贝进去，然后打开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. 使用apache ftpserver搭建ftp服务器

    作为一个javaer,遇到任何问题,先查一下java中的解决方案.地球上的许多事情,在java中都能找到完美的解决方案.之前搭建ftp服务器使用的是vsftpd,现在可以把它卸掉了,它以服务的形式运行 ...

  2. Android Studio NDK编程-环境搭建及Hello!

    一,下载 安装android-ndk开发包 NDK各个版本链接二,新建项目NDKDemo,选择空Activity就可以:(注:Android studio 2.2,可通过SDK Tools 添加LLD ...

  3. jQuery插件 -- Cookie插件jquery.cookie.js（转）

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...

  4. 给td添加滚动条

    <td><div style="overflow-y:scroll;height:330px;">test</div></td>

  5. Java 枚举类的基本使用

    枚举(enum)类型是Java 5新增的特性,它是一种新的类型,允许用常量来表示特定的数据片断,而且全部都以类型安全的形式来表示. 1.常量的使用       在JDK1.5之前,我们定义常量都是:p ...

  6. java 部分注解说明（待补充）

    内容 所代表的意思 @RequestMapping(params = "save") @ResponseBody 将内容或对象作为http响应正文返回,并调用适合HttpMessa ...

  7. jmeter测试 常用数据库的性能

    在线程组中设置线程属性,执行次数=线程数*循环次数 本次JOB共插入了5W条记录,从14:56:46开始到15:01:29结束共耗时343s,平均145.8条/s. 同理sql sever:从15:2 ...

  8. 面试题目——《CC150》栈与队列

    面试题3.1:描述如何只用一个数组来实现三个栈. 方法1:固定分割 方法2:弹性分割(较难) package cc150; public class ArrayStack { public stati ...

  9. javascript数据结构与算法--链表

    链表与数组的区别?  1. 定义: 数组又叫做顺序表,顺序表是在内存中开辟一段连续的空间来存储数据,数组可以处理一组数据类型相同的数据,但不允许动态定义数组的大小,即在使用数组之前必须确定数组的大小. ...

  10. @property 参数

    /* 1.set方法内存管理相关的参数 * retain : release旧值,retain新值(适用于OC对象类型) * assign : 直接赋值(默认,适用于非OC对象类型) * copy : ...