JavaScript--XMLHttpRequest通过json对象获取数据方法

最新推荐文章于 2025-05-30 09:03:45 发布

三分之一给你

最新推荐文章于 2025-05-30 09:03:45 发布

阅读量8.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/xiebin6163/article/details/79304262

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用JSON格式进行数据交互的方法，并提供了一个具体的HTML示例，展示了如何使用JavaScript来解析并显示从服务器获取的JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过json对象获取数据

json在wiki中的解释如下：

In computing, JavaScript Object Notation or JSON is an open-standard file format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). It is a very common data format used for asynchronous browser–server communication, including as a replacement for XML in some AJAX-style systems.

在计算机的运行中，JavaScript对象标记法或JSON是一个开发标准文件格式，它是传输键值对与列数据形式组成的数据对象的可读性较高的通讯方法。JSON常普遍用于浏览器-服务器异步通信的数据格式

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get json</title>
    <script type="text/javascript">

        window.onload = function() { /*设置在页面加载完后执行以下js代码*/
            var url = "sales.json"/*将连接赋到变量url中*/
            var request = new XMLHttpRequest();/*用new创建一个XHR对象*/
            request.open("GET",url);/*设置XHR对象的请求方法与路径*/
            request.send(null);/*设置XHR对象不发送数据到服务器*/
            request.onload = function() {/*设置当获XHR对象获取到返回信息后执行以下代码*/
                if(request.status == 200) {/*如果返回的状态为200，即为成功获取数据*/
                    var contentdiv = document.getElementById("content");/*获取DOM中id为luck的p元素*/
                    var jsoncontent = JSON.parse(request.responseText);/*将获取的信息解析为json对象*/
                    var jsondiv = document.createElement("div");/*在js中创建一个div元素命名为jsondiv*/
                    jsondiv.innerHTML = jsoncontent[0].name;/*将json对象中第一个元素的name属性对应的值写入jsondiv中*/
                    contentdiv.appendChild(jsondiv);/*将jsondiv放入DOM中，作为contentdiv的子元素*/
                }
            }

        }

    </script>
</head>
<body>
    <p>获取的json内容如下</p>
    <div id="content"></div>
</body>
</html>