json XmlHttpRequest基本示例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了json XmlHttpRequest基本示例相关的知识，希望对你有一定的参考价值。

import {Observable} from "rxjs";

let output = document.getElementById("output");
let button = document.getElementById("button");

let click = Observable.fromEvent(button,"click");

function load(url:string){
    let xhr = new XMLHttpRequest();

    xhr.addEventListener("load",()=>{
        let movies = JSON.parse(xhr.responseText);
        movies.forEach(m=>{
            let div = document.createElement("div");
            div.innerHTML = m.title;
            output.appendChild(div);
        });
    });

    xhr.open("GET",url);
    xhr.send();
}

click.subscribe(
    e=>load("movies.json"),
    e=>console.log(`error: ${e}`),
    ()=>console.log("complete")
);
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <button id="button">Get Movies</button>
    <div id="output"></div>
<script src="app.js"></script>
</body>
</html>
[
    {
        "title":"Star Wars"
    },
    {
        "title":"Star Trek"
    },
    {
        "title":"Starship Troopers"
    }
]

以上是关于json XmlHttpRequest基本示例的主要内容，如果未能解决你的问题，请参考以下文章

加载 JSON 适用于 XMLHttpRequest 但不适用于 jQuery

为啥我不能使用 XMLHttpRequest 从本地网络获取 JSON 文件？ [复制]

为啥我不能使用 XMLHttpRequest 从本地网络获取 JSON 文件？ [复制]

XMLHttpRequest + JSON + 文件上传 + axios

http post json dart 错误：XMLHttpRequest 错误

使用 JSON 制作 XmlHttpRequest POST [重复]