先创建下面的两个文件，并将代码拷贝进去，然后打开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标签：
