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

本文介绍了一种利用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值