先创建下面的两个文件，并将代码拷贝进去，然后打开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. 关于select那点事

    select: 通过监视多个文件描述符的数组.当select()返回后 文件描述符便会被内核修改标志位,使进程 能进行后续操作 ------------------------------------ ...

  2. shell中测试命变量是否已经定义

    (1)sehll实例 # cat subshell #!/bin/bash if (set -u; : $var); then #冒号与$间有空格 echo "Variable is set ...

  3. 教你一招：Win10切换输入法与Win7一样（Ctrl + 空格）

    对于win10的朋友,大部分人对输入法都不习惯,如果你把英语输入法删除了,在中文输入法里没有美式键盘,让ctrl+空格与ctrl+Shift都能在搜狗输入法和美式键盘切换.下面小编就教你怎么让Win1 ...

  4. 解决：sudo: 无法解析主机：dinphy-500-310cn: 连接超时

    出现这种问题是hosts文件没有配置好所导致的,linux无法解析到您的主机地址,解决方案如下: sudo vim /etc/hosts 其中vim是你的文本编辑器的命令,你如果电脑中没有vim,用g ...

  5. console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析

    console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...

  6. DSP, SSP, DMP

    先了解下广告的产业链有哪些人群: 广告主advertisers 显然是指想为自己的品牌或者产品做广告的人,例如宝马.Intel.蒙牛-- 媒体publisers       则是提供广告位置的载体,例 ...

  7. bzoj 4553 && HEOI2016 day1t3 seq

    一个序列在所有变换中都单调不降的条件是i<j,a[i]<=min[j],mx[i]<=a[j],所以套CDQ就行了. #include<iostream> #includ ...

  8. jQuery下拉菜单插件Tendina.

    插件效果: 下载地址和文档: https://github.com/iprignano/tendina

  9. 机器学习笔记—svm算法（上）

    本文申明:本文原创,如转载请注明原文出处. 引言:上一篇我们讲到了logistic回归,今天我们来说一说与其很相似的svm算法,当然问题的讨论还是在线性可分的基础下讨论的. 很多人说svm是目前最好的 ...

  10. centos7下 安装mysql

    wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-rele ...