Question

您好我有从我所取出的数据以及用户填充的列表的用户之一JSON ..现在这里是TWEAK当用户点击该列表OD用户，页面（屏幕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);
           });
    });
 });

Answer 1

这是一个显示我的意思的例子：

<!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>

JavaScript文件; app.js：

(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();
        };
    }]);
}());

Answer 2

考虑使用AngularJS。它非常适合这种事情。在链接的控制器中，只需将主div替换为包含单个用户信息的div。你应该考虑有两种不同的饲料;一个用户列表，一个用户个人用户。

使用json数据打开新页面而不刷新页面

2 个答案: