ajax循环请求json数据

AJAX是一种前端技术,可以实现异步请求和无需刷新页面的数据交互。循环请求JSON数据是AJAX的常见用法之一。

ajax循环请求json数据

首先,我们需要准备一个服务端接口,返回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秒钟发送一次请求,实现循环请求的效果

当请求失败时,我们将错误信息输出到控制台,并再次调用setTimeout函数,进行重试。

相关文章

AJAX是一种基于JavaScript和XML的技术,能够使网页实现异步交...
在网页开发中,我们常常需要通过Ajax从后端获取数据并在页面...
在前端开发中,经常需要循环JSON对象数组进行数据操作。使用...
AJAX(Asynchronous JavaScript and XML)是一种用于创建 We...
AJAX技术被广泛应用于现代Web开发,它可以在无需重新加载页面...
Ajax是一种通过JavaScript和HTTP请求交互的技术,可以实现无...