先创建下面的两个文件，并将代码拷贝进去，然后打开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. 交换机--Switch

    交换机(Switch)意为"开关"是一种用于电(光)信号转发的网络设备.它可以为接入交换机的任意两个网络节点提供独享的电信号通路.最常见的交换机是以太网交换机. 这里的" ...

  2. .Net 中的反射(反射特性) - Part.3

    反射特性(Attribute) 可能很多人还不了解特性,所以我们先了解一下什么是特性.想想看如果有一个消息系统,它存在这样一个方法,用来将一则短消息发送给某人: // title: 标题:author ...

  3. 迭代器学习之一：使用IEnumerable和IEnumerator接口

    写博客是检验我学习的成果之一以及自我总结的一种方式,以后会经常利用这种方式进行技术交流和自我总结,其中认识不深难免会有错误,但是一直懂得不懂就问,不懂就学的道理! 1.首先看一个简单的列子 , , , ...

  4. mod-mono

    http://go-mono.com/config-mod-mono/  配置文件生成器 Mono remote debugging from Visual Studio http://stackov ...

  5. solr多条件查询（四）

    上面讲到比较烦琐,如果这个不好理解,可以直接用sorl的多条件过滤addFilterQuery();方法

  6. Excel 自动更正

    当有复杂的字段需要重复填写怎么办呢,比如××银行卡号,××电话号码,××公司地址等.可以使用excel的"自动更正"功能解决. 1. Excel 2010的自动更正选项在哪里呢 2 ...

  7. （转载）JavaWeb学习总结(五十一)——邮件的发送与接收原理

    博客源地址:http://www.cnblogs.com/xdp-gacl/p/4209586.html 一. 邮件开发涉及到的一些基本概念 1.1.邮件服务器和电子邮箱 要在Internet上提供电 ...

  8. php代码规范—2

    如何写出好的 PHP 代码? 在本文中,我们将探讨一些良好的编程习惯,这将帮助你避免代码中的缺陷. 1- 编写模块化代码 良好的PHP代码应该是模块化代码.PHP的面向对象的编程功能是一些特别强大的工 ...

  9. Node.js入门学习笔记（二）

    函数传递 举例来说,你可以这样做: function say(word) {      console.log(word);  }  function execute(someFunction, va ...

  10. GitHub使用教程

    一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业.Cop ...