您的位置：首页 > Web前端 > JavaScript

ajax获取json的值

2015-12-21 17:04 489 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jquery.min.js"></script>

<script src="jsScroll.js"></script>

<style type="text/css">

*{margin:0;padding:0;}

ul li{list-style:none;}

.showMoreNChildren{width:195px;margin:0 auto;overflow:hidden;padding-right:10px;}

.showMoreNChildren li {width:100%;position: relative;padding: 8px 0 8px;display:block;}

.icon-putong {width: 34px;height: 34px;background: 0;display:inline-block;}

.showMoreNChildren li span {width: 120px;margin: 0 0 0 10px;display:inline-block;font-size: 13px;cursor: default;padding-top: 1px;}

.groupIcon {background: 0;position: absolute;left: 163px;}

.groupIcon img {max-height: 30px;max-width: 30px;}

.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}

.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}

.divScrollBar div{background-color:#aaa; position:absolute; left:0px; top:0px;}

.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}

.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}

.divScrollBar div{background-color:#aaa; position:absolute; left:0px; top:0px;}

.showMorehandle{text-align:center;font-size:14px;color:#09F;}

</style>

</head>

<body>

<div id="user_list_bar" style="width:204px;margin:0 auto;overflow-y:scroll;height:800px;">

<ul id="users" class="showMoreNChildren" pagesize="2">

</ul>

<div class="showMorehandle">更多..</div>

</div>

<script>

$(function(){

$.ajax({
type: "POST",
url: "/hhh.php",
dataType: "json",
data:"123",
success: function(data) {
var json=eval(data);
for(var n=0;n<json.length;n++){
jQuery("#users").append("<li class=\"login-user\" ><i class=\"icon-putong\"><img src=\""+json
.perimg+"\" width=\"24px\" height=\"24px\" /></i><span>"+json
.name+"</span><i class=\"groupIcon\"><img src=\""+json
.iconimg+"\"
/></i></li>");
}
jsScroll(document.getElementById('user_list_bar'),6, 'divScrollBar');
}

});
$(".showMorehandle").click(function(){
$.ajax({
type: "POST",
url: "/hhh.php",
dataType: "json",
data:"123",
success: function(data) {
var json=eval(data);
for(var n=0;n<json.length;n++){
jQuery("#users").append("<li class=\"login-user\" ><i class=\"icon-putong\"><img src=\""+json
.perimg+"\" width=\"24px\" height=\"24px\" /></i><span>"+json
.name+"</span><i class=\"groupIcon\"><img src=\""+json
.iconimg+"\"
/></i></li>");
}
jsScroll(document.getElementById('user_list_bar'),6, 'divScrollBar');
}
});

});

});

</script>

</body>
</html>

<?php

$arr = array(

array ('perimg' => 'images/01.png','name' => '游客_342333','iconimg' => 'images/用户 - 小-(9).png'),

array ('perimg' => 'images/01.png','name' => '游客_342333','iconimg' => 'images/用户 - 小-(9).png'),

);

$jsonstr = json_encode($arr);

echo $jsonstr;

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航