打开包含json数据的新页面而不刷新页面
打开包含json数据的新页面而不刷新页面
提问于 2016-02-12 23:51:10
现在的调整是当用户点击这个用户列表时，页面(屏幕2)在同一窗口中打开，没有页面刷新或重定向，其中包含该特定用户的所有信息，其详细信息显示在json中。
{
"data": {
"show_dashboard_access_page": false,
"login_status": "signedin",
"new_io": true,
"bst_users": [{
"userA": {
"user_logo": "image path",
"partner_since": "Jan 2013",
"status_now": "bronze",
"year_calculated": 2016,
"total": 300000,
"year_wise_usage": 123000,
"storage_wise_usage": 73000,
"server_wise_usage": 50000,
"order": 1
},
"userB": {
"user_logo": "image path",
"partner_since": "Feb 2014",
"status_now": "silver",
"year_calculated": 2016,
"total": 300000,
"year_wise_usage": 160000,
"storage_wise_usage": 60000,
"server_wise_usage": 100000,
"order": 2
},
"userC": {
"user_logo": "image path",
"partner_since": "Mar 2014",
"status_now": "silver",
"year_calculated": 2016,
"total": 300000,
"year_wise_usage": 180000,
"storage_wise_usage": 80000,
"server_wise_usage": 100000,
"order": 3
}
}]
},
"success": true
}代码直到获取屏幕1上的用户列表：
$.getJSON( "jsonpath", function( response ) {
$.each(response.data.bst_users, function(idx,obj){
$.each(obj, function(key, value){
console.log(key + ": " + value);
var item = "<li> <a href=''> <small> <img src='" + value["user_logo"] + "' alt=''/></small>" + "<span>" + key + "</span>" + "</a> </li>"
$('ul').append(item);
});
});
});回答 2
Stack Overflow用户
发布于 2016-02-13 02:28:49
这里有一个例子，说明了我的意思：
<!doctype html>
<html ng-app="app">
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="UsersController">
<div id="users">
<div ng-repeat="user in users">
<a href ng-click="go(user.id)">{{user.name}}</a>
</div>
</div>
<div id="user">
<div>{{current.name}}</div>
<div>{{current.age}}</div>
<a href ng-click="back()">back</a>
</div>
</div>
</body>
</html>app.js: JavaScript文件：
(function(){
var app = angular.module("app", []);
users = [
{"id": 1, "name": "Palle", "age": "48"},
{"id": 2, "name": "Peter", "age": "11"}
];
app.controller("UsersController", ["$scope", "$http", function($scope, $http) {
$("#user").hide();
$scope.users = users;
$scope.go = function(id) {
console.log(id);
$("#users").hide();
$("#user").show();
$scope.current = $scope.users.find(function(element) {
return element.id === id;
});
};
$scope.back = function() {
$("#user").hide();
$("#users").show();
};
}]);
}());Stack Overflow用户
发布于 2016-02-12 23:55:52
考虑使用AngularJS。对于这类事情，它是完美的。在链接的控制器中，只需将主div替换为包含单个用户信息的div。您应该考虑使用两个不同的提要；一个用于用户列表，另一个用于单个用户。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35366770
复制相关文章
相似问题
腾讯云开发者
