先创建下面的两个文件,并将代码拷贝进去,然后打开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. Android开发之Touch事件分发机制

    原地址http://www.cnblogs.com/linjzong/p/4191891.html Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实 ...

  2. 【转载】浅谈HTTP中Get与Post的区别

    [转载]http://www.cnblogs.com/hyddd/ Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们 ...

  3. C#中中文编码的问题(StreamWriter和StreamReader默认编码)

    在使用StreamWriter和StreamReader时产生了这样的疑问,在不指定的情况下,他们使用什么编码方式? 查看MSDN,请看下图: 注意红色区域  这让我以为构造函数参数不同时使用不一样的 ...

  4. Graphics绘图闪烁的问题

    加入获取的boardPanel.CreateGraphics()时候 用这个g去g.Clear(BackColor);时候会闪烁. 解决办法:  在绘图的时候 用 绘图的image的Graphics. ...

  5. phpexcel导入数据部分数据有误

    数据在excel中是这样的: 插入数据库后是这样的: 很难发现,出错的那几条数据中的单元格中都有英文','符号,而phpexcel又是以','来拼接读取到的数据的. 解决办法:修改代码中的','为不常 ...

  6. Derivative of the softmax loss function

    Back-propagation in a nerual network with a Softmax classifier, which uses the Softmax function: \[\ ...

  7. zTree 循环树

    /// <summary> /// 初始化第一次节点加载 /// </summary> /// protected string _menu = string.Empty; p ...

  8. elasticsearch snapshot

    一.Repositories 在elasticsearch.yml文件中增加path.repo路径配置: $ vim /etc/elasticsearch/elasticsearch.yml path ...

  9. 如何合并两个Docker 镜像

    http://www.open-open.com/lib/view/open1437746544709.html 在你的机器上使用docker pull来从Docker Hub下载镜像. docker ...

  10. 百度编辑器 Ueditor 下拉处增加字体

    左百度,添加到同右钉邮那么多:                                               1.\ueditor\lang\zh-cn\zh-cn.js  文件中找到: ...