jquery 获取服务器json 数据笔记

最新推荐文章于 2021-08-03 03:05:53 发布

weixin_33690367

最新推荐文章于 2021-08-03 03:05:53 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript php ViewUI

原文链接：https://my.oschina.net/u/998304/blog/350616

本文介绍如何使用PHP、AJAX和JSON实现动态加载数据到网页中，包括数据结构设计、发送请求和解析响应的过程。

2019独角兽企业重金招聘Python工程师标准>>>

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>

转载于:https://my.oschina.net/u/998304/blog/350616