AJAX是一种前端技术,可以实现异步请求和无需刷新页面的数据交互。循环请求JSON数据是AJAX的常见用法之一。
首先,我们需要准备一个服务端接口,返回JSON格式的数据。例如,以下是一个简单的PHP脚本:
<?PHP $data = array( array('name' => '小明','age' => 18),array('name' => '小红','age' => 20),array('name' => '小刚','age' => 22),); header('Content-Type: application/json'); echo json_encode($data); ?>
接下来,在前端页面中使用AJAX发送请求,并处理JSON数据。以下是一个简单的示例代码:
var url = 'http://example.com/data.PHP'; function getData() { $.ajax({ url: url,dataType: 'json',success: function(data) { for (var i = 0; i < data.length; i++) { var item = data[i]; var p = $('<p>').text(item.name + '今年' + item.age + '岁。'); $('body').append(p); } setTimeout(getData,5000); },error: function(xhr,status,error) { console.error(error); setTimeout(getData,5000); } }); } $(function() { getData(); });
在JavaScript代码中,我们使用$.ajax函数发送请求,指定url和dataType参数。当请求成功时,我们使用for循环遍历返回的数据,生成多个p标签,并添加到页面中。接着,使用setTimeout函数,每隔5秒钟发送一次请求,实现循环请求的效果。