先创建下面的两个文件，并将代码拷贝进去，然后打开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. 如何同时运行两个tomcat？

    两个以上,要更改端口号.1 下载tomcat的压缩包(不是安装的那种,直接解压缩就能用的)下载地址:http://tomcat.apache.org/download-55.cgi 下载好的文件名是: ...

  2. 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    REFERENCE FROM : http://www.cnblogs.com/artech/archive/2012/07/04/Knockout-web-api.html 较之面向最终消费者的网站 ...

  3. 【BZOJ 3051】【UOJ #57】【WC 2013】平面图

    http://www.lydsy.com/JudgeOnline/problem.php?id=3051 http://uoj.ac/problem/57 这道题需要平面图转对偶图,点定位,最小生成树 ...

  4. web框架 之 Tornado

    初识 Tornado : tornado web server 是使用python编写出来的一个轻量级.高可伸缩性和非阻塞IO的Web服务器软件,其特点是采用epoll非阻塞IO,相应快速,可处理数千 ...

  5. Python【第二章】：Python的数据类型

    基本数据类型 一.整型 如: 18.73.84 二.长整型 如:2147483649.9223372036854775807 三.浮点型 如:3.14.2.88 四.字符串 如:'wupeiqi'.' ...

  6. 点评前端开发工具cortex安装使用方法

    cortex安装方法: 安装最新版 sudo npm install -g cortex cortex config set registry http://registry.cortexjs.org ...

  7. Java Web学习笔记3

    今天做了一个实验:Servlet访问WEB-INF目录下的文件notice.html 最后始终不能出现预期的效果,我猜想可能是使用了Tomcat 8版本的原因吧,暂时放下,等以后知识丰富了,再来解决它 ...

  8. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  9. List拆分成多个集合

    如果对一组大的集合进行操作,想分组进行,比如批量新增10000条数据,想100条分成一个集合分成100个集合,对集合进行操作100次,用C#如何编写,这里记录下代码如下 //构造被分隔的集合 List ...

  10. HTML5+CSS3 - 代码简写篇

    有话先说:我是一只菜鸟,还是一只刚步入前端这个领域的小菜年,在不断的进阶,理解最深刻的还是代码,既爱又恨却不知如何去感悟. background属性简写: background-position属性组 ...