21xrx.com
2024-12-22 16:50:54 Sunday
登录
文章检索 我的文章 写文章
数据?——代码实例详解
2023-06-11 23:30:37 深夜i     --     --
JavaScript JSON数据 XMLHttpRequest对象

在前端开发中,经常需要从服务器获取数据并以JSON格式返回,以便在客户端进行展示或者操作。那么,在JavaScript中,如何读取JSON数据呢?下面我们来一起看一下。

首先,我们需要从服务器获取JSON数据。这里我提供一个简单的实例——从GitHub API获取用户信息。请求地址为:

script

https://api.github.com/users/{username}

其中,{username}为用户的GitHub账号名称。比如,如果要获取"octocat"用户的信息,请求地址为:

script

https://api.github.com/users/octocat

接下来,我们可以使用JavaScript中的XMLHttpRequest对象来发送GET请求,获取JSON数据。具体实现代码如下:

script

function getUserInfo(username) {

  const xhr = new XMLHttpRequest();

  xhr.open('GET', `https://api.github.com/users/${username}`, true);

  xhr.onload = () => {

    if (xhr.status === 200) {

      const data = JSON.parse(xhr.responseText);

      console.log(data);

    } else {

      console.error('Error getting user information');

    }

  };

  xhr.onerror = () => {

    console.error('Error getting user information');

  };

  xhr.send();

}

以上代码中,我们先通过XMLHttpRequest对象打开GET请求,并指定请求地址。接着,我们为请求设置一个onload回调函数。当请求成功返回时,该函数会被调用。在onload回调函数中,我们可以通过JSON.parse方法将获取到的JSON字符串解析为JavaScript对象。最后,我们用console.log输出解析后的数据对象。

如果请求失败了,onerror回调函数就会被调用,提示请求出错。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
    相似文章