如何在 Ajax 中获取 JSON 响应？

AJAX是一组技术，允许用户在不干扰现有页面的情况下异步获取数据。我们可以使用 AJAX 获取各种类型的数据，例如 JSON、XML、HTML 和文本文件。

在本文中，我们将了解如何在 Ajax 中获取 JSON 响应。

方法：为了解决这个问题，我们将首先考虑一个名为“ capitals.json ”的 JSON 文件，并尝试使用AJAX获取此 JSON 数据作为响应。然后我们将创建一个 HTML 文件“capitals.html” ，其中包含一个表格，我们将使用该表格来填充我们获得的响应数据。最后，我们将创建一个名为“capitals.js”的 JavaScript 文件来编写获取 JSON 数据的代码。在我们的代码中，我们将使用纯 JavaScript 来完成给定的任务。我们将使用XMLHttpRequest对象向服务器发出请求并获得其响应。

以下是上述方法的分步实施。

第 1 步：让我们看看我们拥有的 JSON 内容。

大写字母.json：

{
  "countries_capitals":[
  {
    "country":"India",
    "capital":"New Delhi"
  },
  {
    "country":"Italy",
    "capital":"Rome"
  },
  {
    "country":"Germany",
    "capital":"Berlin"
  },
  {
    "country": "Egypt",
    "capital":"Cairo"
  },
  {
    "country": "Australia",
    "capital":"Canberra"
  }
]
}

第 2 步： HTML 文件，其中包含一个名为“Countries and their capitals”的表格，以及一个“获取”按钮以单击，以便在单击它时我们将能够将 JSON 数据填充到表格中。

Capitals.html



  

    
    Countries and Capitals
    

  

    GeeksforGeeks
    
        
            
            
            
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
            
                
                
            
        Countries and their capitalsCountries Capitals

capitals.js

const fetchBtn = document.getElementById("fetchBtn");
const countries = document.getElementsByClassName("countries");
const capitals = document.getElementsByClassName("capitals");
  
fetchBtn.addEventListener("click", buttonHandler);
  
// Defining buttonHandler function
function buttonHandler() {
  
    // First create an XMLHttprequest object
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "capitals.json", true);
    xhr.getResponseHeader("Content-type", "application/json");
  
    xhr.onload = function() {
        const obj = JSON.parse(this.responseText);
        Array.from(countries).forEach((country, index) => {
            country.innerText = obj.countries_capitals[index].country;
        });
  
        Array.from(capitals).forEach((capital, index) => {
            capital.innerText = obj.countries_capitals[index].capital;
        });
    }
  
    xhr.send();
}

输出：

第 3 步：这是我们的 JavaScript 文件，其中包含使用AJAX 获取 JSON 响应的代码。

首先，我们将获取作为“获取”按钮和“国家及其首都”表列的所有 HTML 元素，以便我们可以使用 DOM 操作动态填充它。
我们将在“获取”按钮上附加一个事件监听器。
然后，我们将创建一个XMLHttpRequest对象。
创建XMLHttpRequest对象后，我们将调用它的open方法打开请求， open方法接受三个参数，一个 HTTP 方法（如 GET、POST）、我们要获取的数据的 URL 和一个布尔值（true 表示异步请求，false 表示同步请求）。
然后，使用getResponseHeader方法返回包含指定标题文本的字符串，这里将使用该方法来定义我们正在获取的数据类型。
在此之后，我们调用onload方法，该方法定义了请求成功完成后要做什么。在onload方法中，我们首先解析响应文本，并使用forEach循环一一遍历所有国家和首都列，并使用我们解析的响应文本数据填充它。
最后，我们将使用XMLHttpRequest对象的send方法向服务器发送一个请求。

首都.js

const fetchBtn = document.getElementById("fetchBtn");
const countries = document.getElementsByClassName("countries");
const capitals = document.getElementsByClassName("capitals");
  
fetchBtn.addEventListener("click", buttonHandler);
  
// Defining buttonHandler function
function buttonHandler() {
  
    // First create an XMLHttprequest object
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "capitals.json", true);
    xhr.getResponseHeader("Content-type", "application/json");
  
    xhr.onload = function() {
        const obj = JSON.parse(this.responseText);
        Array.from(countries).forEach((country, index) => {
            country.innerText = obj.countries_capitals[index].country;
        });
  
        Array.from(capitals).forEach((capital, index) => {
            capital.innerText = obj.countries_capitals[index].capital;
        });
    }
  
    xhr.send();
}

现在，如果我们单击“Fetch”按钮，我们将在上表中看到名为“Countries and their capitals”的 JSON 数据。