ajax筛选json数据

在网页开发中，我们常常需要使用JavaScript来动态加载数据，并实现对数据的筛选和展示。其中，Ajax（Asynchronous JavaScript and XML）技术是一种典型的实现方式。

在本文中，我们将结合JSON数据，介绍如何使用Ajax来实现对数据的筛选。

//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//指定请求方式和请求地址
xhr.open('GET','data.json',true);

//发送请求
xhr.send();

//请求状态发生变化时触发回调函数
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        //获取返回的JSON数据
        var json = JSON.parse(xhr.responseText);
        
        //获取筛选条件
        var condition = document.getElementById('condition').value;
        
        //筛选符合条件的数据，并展示
        var results = document.getElementById('results');
        var html = '';
        for(var i = 0; i ' + json[i].name + '';
            }
        }
        results.innerHTML = html;
    }
};

上述代码中，我们首先使用XMLHttpRequest对象来发起Get请求，获取数据。在请求回调函数中，我们将返回的JSON数据和用户输入的筛选条件进行比较，筛选出符合条件的数据，并进行展示。

通过这种方式，我们可以在不刷新页面的情况下，实现对数据的筛选和展示，提升了用户的体验。