异步在屏幕上显示信息的例子

时间:2014-07-22 14:48来源: 作者: 点击: 次

分享到：

思路：首先通过PHP生成一个待处理的消息队列，通过js将生成的队列脚本进行解析，再请求处理消息的URL，将返回的处理信息输出到屏幕上，由ajax的异步处理机制，分条解析的队列会交

思路：首先通过PHP生成一个待处理的消息队列，通过js将生成的队列脚本进行解析，再请求处理消息的URL，将返回的处理信息输出到屏幕上，由ajax的异步处理机制，分条解析的队列会交由PHP进行处理，并等待处理结果，处理完毕以后自然可以异步显示在屏幕上

<?php
///测试队列
$list = array("测试1"=>"1111111111111111111",
	"测试2"=>"22222222222222222222222",
	"测试3"=>"111111133333333333333333111111111111",
	"测试4"=>"1111111444444444444444444444444111111111111",
	"测试5"=>"5555555555555555555555555",
	"测试6"=>"6666666666666666666666666666",
	"测试7"=>"77777777777777777777777777",
	"测试8"=>"888888888888888888888888",
	"测试9"=>"999999999999999999999999",
	"测试10"=>"000000000000000",
	"测试11"=>"111111111111111111111",
	"测试12"=>"222222222222222222222222",
	"测试13"=>"333333333333333333333333",
	"测试14"=>"444444444444444444444444",
	"测试15"=>"333333333333333333333",
	"测试16"=>"222222222222222222222",
	"测试17"=>"33333333333333333333333333",
	"测试18"=>"1111111111111111111",
	"测试19"=>"4444444444444444444444",
	"测试20"=>"ggggggggggggggggggg",
	"测试21"=>"1111111111111111111",
	"测试22"=>"dddddddddddddd",
	"测试231"=>"ffffffffffffffff",
	"测试241"=>"1111111111111111111",
	"测试251"=>"gggggggggggggggggggg",
	"测试2331"=>"1111111111111111111",
	"测试2223331"=>"1111111111111111111",
	"测试2341"=>"fffffffffffffffffff",
	"测试341231"=>"1111111111111111111",
	"测试12311234"=>"1111111111111111111",
	"测试43561"=>"ddddddddddddddddddddd",
	"测试23451"=>"22222222222222222222222222",);
	if(@$_GET['dl']){
		//生成总队列
		echo json_encode($arr);
	}
	if(@$_GET['stats']){
		//暂停一会
		sleep(5);
		//生成处理完毕的队列
		echo json_encode($_GET);
	}

?>

2. [代码]前端页面等待后台处理并异步显示跳至 [1] [2] [全屏预览]

<!doctype=html>
<html>
	<head>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>

	$(function(){
		$.getJSON("t.php?dl=1",function(data){
			$.each(data,function(k,v){
					console.log(v);
					$.getJSON("t.php?stats="+v,function(data1){
						$.each(data1,function(k1,v1){
							console.log(v1);
							$('body').append("<h1>"+v1+"</h1>");
						})
					});
					
			});
			
		});
	});
</script>
</head>
	<body>
	</body>
</html>