ASP输出JSON，jQuery.get异步请求，HTML5本地存储，JavaScript分页显示

最新推荐文章于 2024-04-06 23:47:10 发布

rtian001

最新推荐文章于 2024-04-06 23:47:10 发布

阅读量1.1k

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/rtian001/article/details/50349293

版权

WEB前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

以英语九百句English.mdb数据库为例。

English.asp：连接数据库、读取记录集、输出JSON格式数据

<%@CODEPAGE="65001"%>
<%
Response.charset="utf-8"
Set conn = Server.CreateObject("ADODB.Connection")
conn.provider="microsoft.ace.oledb.12.0"
conn.open server.mappath("/db/english.mdb")

Set rs=Server.CreateObject("ADODB.RecordSet")
rs.open "select * from sentence",conn,1,1
total=rs.recordcount
'==输出JSON格式数据==============
'json封装时需要注意干扰符号",[]{}之类的。需要对其进行编码解码。
'Response.Write("{""total"":""92"",""content"":[")
Response.Write("[")
For i=0 To total-1
	Response.Write("{")
	For j=0 To rs.fields.count-1
		Response.Write(""""&rs(j).name&""":"""&escape(rs(j))&"""")
		IF (j<rs.fields.count-1) Then Response.Write(",")
	Next
	Response.Write("}")
	If i<total-1 Then Response.Write(",")
	rs.movenext
Next
Response.Write("]")

%>

english.html 使用jQuery.get异步获取English.asp数据,并进行本地存储localstorage,随机显示一条记录定时刷新(分页显示到页面*).

<!DOCTYPE html>
<html >
 <head>
  <title> 英语九百句--ajax/localstorage </title>
  <meta charset="utf-8">
  <script src="http://eduppp.cn/js/jquery-2.1.4.min.js" type="text/javascript"></script>
 </head>
<script type="text/javascript">
var local_content;
	//获取当前localstorage数量：localStorage.length
	//获取localstorage各个名称：localStorage.key(2)
	//获取localstorage变量内容：localStorage.getItem("xxxx")
	//删除localstorage变量：localStorage.removeItem("xxxx")
	//清除localstorage：		localStorage.clear();
	//alert(localStorage.getItem("content"));
	//javascript 大小写敏感：对象、数组、变量、字段名
	//json封装时需要注意干扰符号",[]{}之类的。需要对其进行编码escape解码unescape。
$(function(){
	if (localStorage.getItem("content")==null )	{
		setstorage("content");
	}else{
		rnd_list();
	}
});
function setstorage(id){
	$.getJSON("english.asp",function(data){
		localStorage.setItem(id,JSON.stringify(data)); 
		rnd_list(); 
	});
}
function rnd_list(){
	local_content= JSON.parse(localStorage.getItem("content"));
	var n=Math.floor(Math.random()*local_content.length);
	$("#res").html(unescape(local_content[n].English)+"<br>"+unescape(local_content[n].Chinese));
	setTimeout(function(){rnd_list();},3000);
}

</script>

 <body>
	 <div id="res" ></div>
 </body>
</html>

===========

分页显示(待续)