jquery 獲取服務器json 數據筆記

時間 2019-11-20

原文原文鏈接

php代碼

<?php

$arr=array(
	array('id'=>'5','title'=>'akhkah','mesage'=>'ajax數組'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組ggggggggggggg'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組ggggggggggggg'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組ggggggggggggggg'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組hhhhhhhhhhhhhh'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組sssssssssssss'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組aaaaaaaaaaaaaaa'),
	array('id'=>'6','title'=>'akhka666h','mesage'=>'ajax66數組aaaaaaaaaaaa')
);
$json=json_encode($arr);
echo  $json;
//echo '[{"title":"ajax返回json與數組的組合格式"}]';
?>

html 代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>json與數組的組合</title>
<script type="text/javascript" src="../../jquery-1.3.1.js"></script>
<script>
	$(function(){
		$('#button').click(function(){
			$.ajax({
			url:'server.php?'+Math.random(), 
			type:'get', 				
			success:function(data){
				 res=eval(data);
				for(var i=0;i<res.length;i++){
					$('#content').append('<li><span>'+res[i].title+'</span><span>'+res[i].mesage+'</span></li>');					
				}
			}
			
		});
		$(document).ajaxStart(function(){
			$('#msg').show();
		});
		$(document).ajaxStop(function(){
			$('#msg').hide();
		});
	});
});	
</script>
</head>
<body>
<button id="button">json與數組的組合</button>
<div id='msg'style="display:none;height:50px;background-color:red">數據加載中</div>	
<div id="content">
	
</div>
</body>
</html>