ajax获取数据(ajax获取data的值)

AJAX（Asynchronous JavaScript and XML）是一种在前端开发中常用的技术，它可以在不刷新整个页面的情况下，通过异步请求从服务器获取数据。在实际开发中，经常会遇到需要获取数据并将其展示在页面上的需求。本文将通过举例说明，介绍如何使用AJAX获取data的值，并给出相关代码示例。

假设我们有一个网站，用户可以通过一个表单输入一个城市名，然后点击一个按钮，页面会显示该城市的天气信息。在这种情况下，我们可以通过AJAX获取一个天气API的数据，并将其展示在页面上。

首先，我们需要在页面中创建一个表单和一个按钮，用于用户输入城市名并触发AJAX请求。代码如下：

查询

接下来，我们需要使用AJAX发送请求并获取数据。代码如下：

function getWeatherData(city) {
// 使用AJAX发送GET请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weather.com/weather-info?city=' + city, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 请求成功，获取返回的数据
var data = JSON.parse(xhr.responseText);
// 将数据展示在页面上
document.getElementById('weatherInfo').innerText = data.weather;
}
};
xhr.send();
}

在上面的代码中，我们使用了XMLHttpRequest对象发送GET请求，请求的URL包含了城市名参数。当请求的readyState状态变为DONE，并且HTTP状态码为200时，表示请求成功，此时我们可以从responseText中获取到返回的JSON数据。然后，我们可以将其中的天气信息显示在页面上，比如将其赋值给ID为"weatherInfo"的元素的innerText属性。

最后，我们需要为按钮添加点击事件，触发AJAX请求。代码如下：

document.getElementById('submitButton').addEventListener('click', function() {
var city = document.getElementById('cityInput').value;
getWeatherData(city);
});

在上面的代码中，我们为按钮添加了一个点击事件处理函数。当按钮被点击时，我们从输入框中获取城市名，并将其作为参数传入getWeatherData函数中，触发AJAX请求并获取数据。

通过上述的代码示例，我们可以实现通过AJAX获取数据并将其展示在页面上的功能。当用户输入一个城市名并点击查询按钮后，页面会实时显示该城市的天气信息。这样，我们可以提升用户体验，实现了无需刷新整个页面即可获取最新数据的效果。