[AJAX]通过AJAX技术将本地JSON文件从服务器端传到浏览器端

7_lining

于 2023-03-25 20:36:36 发布

阅读量334

点赞数

分类专栏：前端基础文章标签： ajax javascript json Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_56213139/article/details/129771880

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文章演示了如何使用JavaScript的Ajax技术通过GET方法读取本地JSON文件。它借助VSCode的LiveServer插件创建本地服务器，并展示了处理响应数据，将JSON文本转换为JS对象并显示在页面上的过程。

摘要由CSDN通过智能技术生成

首先关于ajax等基础内容可以看这篇文章，个人觉得写的不错：https://blog.csdn.net/raspi_fans/article/details/127142046

主要是写一段测试代码让js读取本地文件上的json然后通过ajax的get方法拿到数据。这边服务器用的是vscode上的插件Live Server快速生成本地的服务器以达到测试的目的，直接在插件库搜索下载即可。

下面直接上代码：

get里面的请求地址自动更换成你在本地写的json文件名字，此处为student.json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    收到的数据：<div id="content"></div>
    <br>
    <button onclick="sendAjax()">点我发送ajax</button>
</body>
<script>
    var d1 = document.querySelector('div');
    function sendAjax() {
        //新建xhr对象
        //先使用liveserver插件开启本地5500端口
        var xhr = new XMLHttpRequest();
        xhr.open('GET',"http://127.0.0.1:5500/student.json",true);
        xhr.send();
        xhr.onreadystatechange = () => {
            if(xhr.readyState == 4 && xhr.status == 200) {
                let responseJSONText = xhr.responseText;
                console.log("已接受到JSON文本");
                console.log(responseJSONText);
                console.log("转化为JS对象");
                console.log(JSON.parse(responseJSONText));
                // 显示到页面上
                d1.innerText = JSON.parse(responseJSONText).student[0].name;
            }
        }
    }
</script>
</html>

执行效果如下：