请教: 如何使用 JavaScript 实现请求 api 并解析 json

[Pzqqt]

问题案例

• 现有一个文件列表页面，打算在每个文件项后面添加一个按钮，点击之后代入文件名作为参数，调用 JavaScript 函数请求 api，这个 api 将返回文件哈希值 大小 最后修改日期等信息，格式为 json，请求完成后解析 json 并反馈到页面上。

在度娘上搜到了一些答案，不过都是使用 JQuery 实现的。请问有不使用 JQuery 实现的方法吗？

[jowan]

不太明白你的意思 不就是为了请求 api 吗，不想用 jq 的话
原生 xhr? axios?

[jorneyr]

1. 原生 JS 的 Ajax
2. Axios
3. Fetch

[sdxlh007]

function ajax(url){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open("get",url,true);
        xhr.send();
        xhr.onreadysattechange = () =>{
            if(xhr.readystate == 4){
                if(xhr.status == 200){
                    var data = xhr.responseTEXT;
                    return data;
                }
            }
        }    
    }

[lovedebug]

很多异步请求库可以直接加载到页面使用的。

[Sapp]

吓得我看了下时间...
这不就是现在各种前端渲染的 UI 框架的正常操作么？ ajax 发送一下请求，回来之后解析不就行了么？

[Hoshinokozo]

jq 只是对 xhr 封装了一下而已，底层还是 xhr，楼主可能需要学习一下 AJAX 方面的知识

[1brother]

Ajax 了解一下

[SuperMild]

这个就是你想要的 http://vanilla-js.com

[wszgrcy]

触发关键词 api,json，等待那个人出现

[agdhole]

FetchAPI
Axios

[xlui]

@wszgrcy 那个男人要出现了吗？

[ipwx]

那一天，v 友再一次回想起了被辣个男人所支配的恐怖…

[sparkle2015]

```
fetch(url)
.then(res => res.json())
.then(data => console.log(data)
```

[IsaacYoung]

🍌迟但到

[xrr2016]

API JSON 这标签简直就是为那个男人定制的啊

[SilentDepth]

http://youmightnotneedjquery.com/

[bojackhorseman]

@SuperMild #8 我还认真的看了一遍，甚至点击了下载按钮，直到看到后面才笑出声。文档连接到 mdn 太真实了。

[SuperMild]

@bojackhorseman 我当初也是这样哈哈哈哈。不过这确实是个不错的学习材料，可以看看原生 js 怎么弄，随着 ES 版本不断提升，很多操作用原生写也不算很麻烦了。

[SuperMild]

@bojackhorseman 我搞错了，#16 那个网站才是学习材料。

[catch]

mdn