用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)方法使用比较灵活,可以用在比较复杂的情况。