js的怎么展示100万条数据

JavaScript010

js的怎么展示100万条数据,第1张

用ajax获取到需要处理的数据。

用ajax获取到需要处理的数据,将数组分组,每组500条,一共260组,循环这260组数据,分别处理每一组数据,利用setTimeout函数开启一个新的执行线程异步,防止主线程因渲染大量数据导致阻塞。

JavaScript简称JS是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

在AngularJS中显示模型中的数据有两种方式:

一种是使用花括号插值的方式:

另一种是使用基于属性的指令,叫做ng-bind

这两种方式的效果是一样的,主要的区别在于:

使用花括号语法的时候,在AngularJS使用数据模板中的花括号时,第一个加载的页面,通常是应用中的index.html, 其未被渲染的模板可能会被用户看到

使用ng-bind的方法时就不会遇到这样的情况

遇到这种情况的原因是:

浏览器需要首先加载index.html页面,渲染他,然后AngularJS才能把它解析成你期望的内容。所以,对于Index.html页面的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

有两种方法,一种是$.ajax(option)方法,一种是$.getJSON()方法。

实例:

一、数据集所在jsp页面out.jsp,代码如下

<%@page

contentType="text/plain

charset=UTF-8"

language="java"

import="java.io.*,java.net.*,java.util.*"

buffer="8kb"

session="false"

autoFlush="true"

%>

<%

String

jsonData="{data:[{id:200901,name:'name1'},{id:200902,name:'name2'},{id:200903,name:'姓名3'},{id:200904,name:'姓名4'},{id:200905,name:'姓名5'}]}"

//out.clear()

out.write(jsonData)

%>

二、js处理页面

(1)

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

<title>test</title>

<meta

http-equiv="Content-Type"

content="text/html

charset=UTF-8"/>

<script

type="text/javascript"

language="javascript"

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

<script

type="text/javascript">

function

getOut(){

var

s=''

$.ajax({

type:'get',//请求方式

url:'out.jsp?id='+Math.random(),

//

AJAX

HTTP请求接口

data:'',//提交到服务器接口的参数

比如'{cid:0405}',结果为out.jsp?cid=0405格式

dataType:'json',//请求类型为json,

更多见jquery

doc文档

timeout:7000,//请求超时后停止请求

success:

function(json){

var

d=json.data

$.each(d,function(i){

s+=('<p>id:'+d[i].id

+'

|

name:'+d[i].name+'</p><hr/>')

})

$('#out').html(s)}})

}

</script>

</head>

<body

style="margin:20pxtext-align:centerbackground:#E5E5E5">

<input

type="text"

name="getdata"

onclick="getOut()"/>

<div

id="out">

</div>

</body>

</html>

(2)

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

<%@

page

language="java"

contentType="text/html

charset=utf-8"%>

<head>

<script

type="text/javascript"

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

<script>

function

showStudent(){

var

s=''

$.getJSON("out.jsp?id="+Math.random(),function(json){

var

d=json.data

for(var

i=0i<d.lengthi++){

s+=('<p>id:'+d[i].id

+'

|

name:'+d[i].name+'</p><hr/>')

}

$('#content').html(s)

})

}

</script>

</head>

<body>

<input

type="button"

value="获取学院信息"

onclick="showStudent()"

/>

<div

id="content"></div>

</body>

</html>

总结:

(1)有时候总是出现错误,原因在于——json数据格式有问题,前端$.getJSON()方法并没有什么错误。

(2)相对来说,$ajax(option)方法使用比较灵活,可以用在比较复杂的情况。