Question

我目前正在开发一个应用程序，我将调用一个url并获取JSON响应。我正在使用Handlebars.js创建一个列表li并最终将其附加到ul。由于json响应很大，因此要求以分页格式显示数据。你们请指导我如何以分页格式显示这些数据。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title> Pagniate json data </title>
	<!-- Latest compiled and minified Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6">
			<ul class="list-group">

			</ul>
        </div>
      </div>
    </div>
    

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<!-- Latest compiled and minified Bootstrap JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>	
	<!-- Handlebars.js -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
    <!-- Handlebar Template for creating the list -->
	<script id="list-group-item-template" type="text/template" >
	    {{#each this}}
        <li class="list-group-item"> {{ title }} </li>
        {{/each}}
	</script>
	<script>
	   $(document).ready(function(){
	   	  $.ajax({
             method:"GET",
             url:"http://starlord.hackerearth.com/cognizantinternal/hackernews",
             success:function(data){
                  //removing the first element from the response array
                  data.shift();
                  var template = Handlebars.compile($('#list-group-item-template').html());
                  var list = template(data);
                  $('.list-group').append(list);
             }
	   	  });
	   });
	</script>
</body>
</html>

＆＃13;

Answer 1

在这种情况下，最好在服务器端进行分页。否则，您可以将json存储在本地存储中并执行分页。请求完成后清除本地存储

Answer 2

IMO，您应该根据发送给服务器的请求进行分页（例如，在发送AJAX请求时提供n数字的限制，通常作为查询参数）。

然后，提供一个Load More按钮向服务器发送另一个请求，或者当用户向下滚动到页面底部时更好地获取数据。

如何分析json响应数据

2 个答案: